#はじめに
どうも、よわよわエンジニアです。
大晦日だというのになぜかQiitaを執筆する異常者です。
さて、今回はみなさん一度は目にしたことがある読み込み中のアレについて解説します。
##今回作るもの
ローディング中のこれ↓
よくみかけるコレですが、
実は結構簡単にhtmlとcssで実装できちゃいます。
今回はアレンジしやすいように１個ずつ解説入りで説明したいと思いますので、
よければ手を動かしながら読んでください。
#実装
まずは背景の黒画面、そしてぐるぐるを真ん中に持ってくる記述から行きます。
コメントは全て//で書きますので、コピペされる方は取り除いてあげてください。
htmlの構成は以下の通り
<!DOCTYPE html>
<html lang="ja"> //日本語設定
<head>
<meta charset="UTF-8"> //文字化け防止のおまじない
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //レスポンシブ対応のおまじない
<title>Test</title> //タイトル
<link rel="stylesheet" type="text/css" href="style.css"></link> //css読み込みの宣言
</head>
<body>
<div class="container"> //背景
<div class="loader"></div> //例のぐるぐる
<p>Now loading...</p> //ぐるぐる下の文字
</div>
</body>
</html>
で、次にcssです。
現状はただの真っ黒い画面にしかならないとおもいますが、
ぐるぐるとNow loading...のもじが画面中央に配置さるよう設定しておきます。
body {
margin: 0; //ブラウザ固有の余白を消します。
padding: 0; //同上
box-sizing: border-box; //余白のとりかたを指定。
width: 100vw; //表示画面の大きさを決めます。
height: 100vh; //同上
}
.container {
background-color: black; //背景色
width: 100%; //横幅を画面いっぱいに指定
height: 100%; //縦幅を・・・同上
display: flex; //flexBoxでレイアウト制御します。
justify-content: center; //左右中央に指定
align-items: center; //上下中央に指定
flex-direction: column; //ぐるぐると文字を縦並びにする指定
}
##ぐるぐる本体作成
以下を先ほどの記述の下に追加してください。
解説はこのあとすぐ！
.loader {
border: 12px solid #fafafa; //12pxの白い四角をつくります
border-radius: 50%; //作った四角の角を丸めます
width: 100px; //ぐるぐるの大きさを決めます
height: 100px; //ぐるぐるの大きさを決めます
}
p{
color: #fafafa; //これはNow loading...の色指定なのでぐるぐるとはあまり関係ない
}
###解説
border: 12px solid #fafafa;
枠線を記述しています。
12pxの１本線で色が#fafafaだよって意味です。
border-radius: 50%;
先ほどの枠線の角をどれだけ丸めるか？っていう記述です。
丸にしたけりゃ問答無用で50%だと覚えておけばいいでしょう。
width: 100px
ぐるぐるの横幅をきめています。
height: 100px
ぐるぐるの縦幅をきめています。
さて、この時点で
こうなってたら成功です。
なんかそれっぽいですね！！！！
##色付け
では、先ほどのものに色付けをしていきましょう。
色付けは実は超簡単。以下の一文を追加してください。
.loader {
border: 12px solid #fafafa;
border-radius: 50%;
border-top: 12px solid #3498db; //これを追加！！
width: 100px;
height: 100px;
}
###解説
border-top: 12px solid #3498db
ぐるぐるの上部に#3498dbという色のバーを追加するよという意味です。
**注意！！**このとき、boaderの大きさとborder-topの大きさは必ず同じにしてください。
今回なら12pxで揃えています。
こうなっていたら成功です。
##アニメーションの追加
ここまできたらあとはアニメーションを追加して終わりです。
あと一歩なんで、頑張って実装しましょう。
.loader {
border: 12px solid #fafafa;
border-radius: 50%;
border-top: 12px solid #3498db;
width: 100px;
height: 100px;
animation: spin 1s linear infinite; //これを追加！！！
}
@keyframes spin{
0%{
transform: rotate(0deg); //アニメーション開始時にどういう状態か？
}
100%{
transform: rotate(360deg); //アニメーション終了時にどういう状態か？
}
}
###解説
animation: spin 1s linear infinite;
animation: 任意の名前 何秒でアニメーションするか アニメーションの進行度 無限ループするか？
という感じで記述をしていきます。
linearとは、一定のスピードで動きますよーという意味です。
ここを、ease-in や ease-out にしてみてください。
開始が遅くて終了間際に早くなったり、その逆になったりと面白い変化が見られます。
@keyframes spin
これは先ほどつけた任意の名前に具体的にどういうアニメーションをつけるかという
アニメーションの設定みたいな記述です。
今回だと、0%のときに
rotate(0deg)と記述しているので、
アニメーション開始時には回転させない（０度地点にいる）という記述です。
そして、100%のときに
rotate(360deg)と記述しているので、
アニメーション終了時には360度回転した場所にいるよ。という意味です。
これをinfiniteで無限ループさせることでぐるぐる回っているように見えます。
こんな感じになったでしょうか？？
#いざアレンジ
ここまでで、解説自体は終了なんですが、
ここにアレンジを加えてみましょう。
自分だけのローディングアニメーションが完成します。
##例その１
THE定番の薄くなったりするアレです。
コードは以下の通り。
.loader {
border: 12px solid #fafafa;
border-radius: 50%;
border-top: 12px solid #000; //バーの色を背景色と同じに
width: 100px;
height: 100px;
animation: spin 1s linear infinite;
}
@keyframes spin{
0%{
transform: rotate(0deg);
opacity: 1; //透明度を１００％
}
65%{
transform: rotate(180deg); //開始から65%の段階で半回転(180deg)する。さらに透明度を40%に設定
opacity: 0.4;
}
100%{
transform: rotate(360deg);
opacity: 1;
}
}
変更点は上記のコメントつけているところだけです。
これで、アニメーション開始時から65%たったタイミングでバーが真下にくるようになるので、
ゆったり始まって、さっと終わるアニメーションができます。
さらに、opacityの設定をしてあげることで、半透明になります。
##例その２
サイズと色が可変するあれです。
通常のローディング画面より「なんかかっこいい」ですね。
コード以下のとおり
.loader {
border: 15px solid #39d4ff; //border-topは削除
border-radius: 50%;
width: 100px;
height: 100px;
animation: spin 2s linear infinite; //スピード遅く
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
50%{ //５０％に変更
transform: rotate(180deg);
border-radius: 0%; //四角にする
width: 20px; //小さくする
height: 20px; //同上
border: 5px double #061fd5; //ぐるぐるの線を二重線にし、細くしてくる
}
100%{
transform: rotate(360deg);
}
}
可変型なので、50%の段階で可変cssをしこたま仕込みました。
これで、大きさが可変するので、別途文字は固定してあります。
#最後に
いかがだったでしょうか？
普段は見かけたらイラっとするローディング画面でも、自分で作るとなると愛着沸きませんか？
htmlとcssだけでこんなに簡単にローディングアニメーションが実装できます。
なんかワクワクが止まりませんね！
CSSってかなり奥が深くて、知れば知るほどおもしろいです！
ぜひ、知る！という快感を味わってみて、アレンジして自分のページをかっこよくしてみてください！