はじめに
完成図
https://gyazo.com/a66af4faca7570d3dd4e0bd8b8881986
一例としてページローダーのようなものをCSSで表現してみたいと思います。
Sassと言ってますが、基本的にはscss記法で書いていきます。そちらの方が個人的には見やすいので。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</body>
</html>
htmlは特に問題なしですね。ローダー部分の要素となるdivを３つ作ります。
.spinner {
text-align: center;
& div {
display: inline-block;
width: 18px;
height: 18px;
background-color: black;
border-radius: 50%;
animation: sk-bouncedelay 1.4s infinite;
}
& .bounce1 {
animation-delay: -0.32s;
}
& .bounce2{
animation-delay: -0.16s;
}
}
@keyframes sk-bouncedelay {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
80% {
transform: scale(0);
}
100% {
transform: scale(0);
}
}
& divで .spennerの中のdivを選択してあげます。
&は、親要素の.spinnerをさしています。
ここのCSSで３つの黒丸を作りました！ animation:の第一引数はキーフレイム。第二引数のinfiniteで、1.4秒で永遠でループするという意味です！
& .bounce1 のcssでそれぞれの黒丸が別々で動くように設定しています。
animation-delay: -0.32s;で遅延させています！
& .bounce2 も同様にずらしてあげます！
キーフレイムを設定するには@keyframes と記述してあげます！
@keyframes sk-bouncedelay {}の中にアニメーションを定義していきましょう。
キーフレイムは基本的に、０％から１００％のアニメーションの状態を記述します！
３つの黒丸が収縮・拡大を繰り返すので、scale という関数を使っていきます。
0%のときは、scale(0);と設定してあげて、
40%のときは、scale(1);と設定。
80%のときは、scale(0); に戻して、
100%もそのまま。
これで完成しました。
おわりに
説明がわかりづらかったらすいません！
以上、Saasを使ったローダーっぽいものの作り方でした。
他にもtransformを使っていろんなパターンが作れそうですので、勉強したらアウトプットできたらいいなと思います。