CSSのみで読み込み処理をするメリットは大いにあります。
前回、GIF画像を使わずにLoadingをコーディングするメリットを書きましたが、今回は、３パターン追加で作成したので、掲載します。
CSSだけでLoadingアニメ素材を作る「Drop編」
Ring
<DOCTYPE html>
<html>
<head>
<style>
.ring{
display:block;
position:relative;
width:64px;
height:64px;
border:1px solid #1DA9F1;
border-radius:50%;
animation: anim-ring 2s ease-in-out infinite;
}
.ring:before{
content:"";
position:absolute;
top:calc(8% / 2 * -1 - 2px);
left:calc((100% - 8%) / 2 - 2px);
width:12%;
height:12%;
border-radius:50%;
background-color:#1DA9F1;
}
@keyframes anim-ring{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Ring</h1>
<div class="ring"></div>
</body>
</html>
サンプル
Point
<DOCTYPE html>
<html>
<head>
<style>
.point{
position:relative;
width:128px;
line-height:60px;
}
.point > .dot{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background-color:#1DA9F1;
margin:8px;
animation: anim-dot 1s ease-in-out infinite;
}
.point > .dot:nth-child(1){
animation-delay: 0s;
}
.point > .dot:nth-child(2){
animation-delay: 0.33s;
}
.point > .dot:nth-child(3){
animation-delay: 0.66s;
}
@keyframes anim-dot{
0%{
transform:scale(1.0);
}
30%{
transform:scale(1.0);
}
65%{
transform:scale(2.0);
}
100%{
transform:scale(1.0);
}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Point</h1>
<div class="point">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>
Bar
<DOCTYPE html>
<html>
<head>
<style>
.loading{
position:relative;
width:128px;
line-height:60px;
}
.loading > .bar{
display:inline-block;
width:8px;
height:48px;
transform:scale(1.0 , 0.5);
background-color:#1DA9F1;
margin:2px 4px;
transform-origin: bottom;
animation: anim-bar 1s ease-in-out infinite;
}
.loading > .bar:nth-child(1){
animation-delay: 0s;
}
.loading > .bar:nth-child(2){
animation-delay: 0.2s;
}
.loading > .bar:nth-child(3){
animation-delay: 0.4s;
}
.loading > .bar:nth-child(4){
animation-delay: 0.6s;
}
@keyframes anim-bar{
0%{
transform:scale(1.0 , 0.5);
}
50%{
transform:scale(1.0 , 0.5);
}
75%{
transform:scale(1.0 , 1.0);
}
100%{
transform:scale(1.0 , 0.5);
}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Point</h1>
<div class="loading">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
