ローダー(lorder)とは？
読込中に表示するものです。
HTMLの記述
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"href="loader.css">
</head>
<body>
<div class="three-dot-spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</body>
</html>SCSSの設定
.three-dot-spinner {
text-align: center;
// ローダーの設定
&div {
display: inline-block;
width: 18px;
height: 18px;
background-color: #904669;
// 丸くする
border-radius: 50%;
// アニメーションの設定1.4秒かけて無限に繰り返す
animation: sk-bouncedelay 1.4s infinite;
}
// 一番左の●の設定で他よりも早くアニメーションされる
&.bounce1 {
animation-delay: -0.32s;
}
&.bounce2 {
animation-delay: -0.16s;
}
}
// ここにアニメーションの定義をする
@keyframes sk-bouncedelay {
0% {
// 収縮させる(大きさが0％)
transform: scale(0);
}
// 拡大させる(大きさが100％)
40% {
transform: scale(1);
}
80% {
transform: scale(0);
}
100% {
transform: scale(0);
}
}