CSSで二つの小さな四角形がぐるぐる四角を描いて回るローディングアイコンを作りました。
<div class="loader"></div>
.loader {
position: relative;
box-shadow: 0 0 0 12px #eee inset;
width: 64px;
height: 64px;
}
/* 小さな四角形二つ */
.loader:before,
.loader:after {
position: absolute;
background: #7fcfe2;
content: "";
width: 12px;
height: 12px;
left: 0;
top: 0;
animation: square 4s linear infinite;
}
/* アニメーション開始位置をずらす */
.loader:after {
animation-delay: -2s;
}
/* アニメーション定義 */
@keyframes square {
25% {
left: 100%;
top: 0;
transform: translate(-100%, 0);
}
50% {
left: 100%;
top: 100%;
transform: translate(-100%, -100%);
}
75% {
left: 0;
top: 100%;
transform: translate(0, -100%);
}
}
要素は一個で。ベンダープレフィックスは適宜追加してください。
ポジション指定とtranslate
の%では基準が違うので、組み合わせることで左端から右端、上端から下端といった移動ができます。
二つの擬似要素をアニメーションさせますが、同じ動きなので、一つのkeyframes
を適用して、片方の開始位置をanimation-delay
でちょうど半分ずらしています。
ここでは省略していますが、デモのように片っぽの色を変えるのもかわいくて良いと思います。
Comments