Loadingのイメージアニメーションで画像を使った時に、そのLoadingアニメーション画像を読み込むのに時間がかかっていてLoading表示できていないWEBサイトを見かけてしまうと、なんだか切ない気分になってしまいます。
その昔は、GIFアニメーションで行うしかなかったLoadingアニメも、今ではCSSの簡易記述だけでかなりの演出が可能になりました。
前回までも、色々なLoadingを紹介してきましたが、今回はWEBで掲載されていて、お気に入りの物を自分なりに書き直しをして紹介したいと思います。
スタンダード「circle」
デモ
ソースコード
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
position:relative;
width:128px;
height:128px;
}
.circle > .dot{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.circle > .dot:after{
content:"";
position:absolute;
left:calc(50% - 10px);
top:0;
width:15%;
height:15%;
border-radius:50%;
background-color:black;
border:0;
margin:0;
padding:0;
font-size:0;
animation: anim-circle-dot 1.2s ease-in-out infinite;
}
.circle > .dot:nth-child(1){transform:rotate(0deg);}
.circle > .dot:nth-child(1):after{animation-delay: 0s;}
.circle > .dot:nth-child(2){transform:rotate(30deg);}
.circle > .dot:nth-child(2):after{animation-delay: -1.1s;}
.circle > .dot:nth-child(3){transform:rotate(60deg);}
.circle > .dot:nth-child(3):after{animation-delay: -1.0s;}
.circle > .dot:nth-child(4){transform:rotate(90deg);}
.circle > .dot:nth-child(4):after{animation-delay: -0.9s;}
.circle > .dot:nth-child(5){transform:rotate(120deg);}
.circle > .dot:nth-child(5):after{animation-delay: -0.8s;}
.circle > .dot:nth-child(6){transform:rotate(150deg);}
.circle > .dot:nth-child(6):after{animation-delay: -0.7s;}
.circle > .dot:nth-child(7){transform:rotate(180deg);}
.circle > .dot:nth-child(7):after{animation-delay: -0.6s;}
.circle > .dot:nth-child(8){transform:rotate(210deg);}
.circle > .dot:nth-child(8):after{animation-delay: -0.5s;}
.circle > .dot:nth-child(9){transform:rotate(240deg);}
.circle > .dot:nth-child(9):after{animation-delay: -0.4s;}
.circle > .dot:nth-child(10){transform:rotate(270deg);}
.circle > .dot:nth-child(10):after{animation-delay: -0.3s;}
.circle > .dot:nth-child(11){transform:rotate(300deg);}
.circle > .dot:nth-child(11):after{animation-delay: -0.2s;}
.circle > .dot:nth-child(12){transform:rotate(330deg);}
.circle > .dot:nth-child(12):after{animation-delay: -0.1s;}
@keyframes anim-circle-dot{
0%{opacity:0.0;}
35%{opacity:1.0;}
70%{opacity:0.0;}
100%{opacity:0.0;}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Circle</h1>
<div class="circle">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>
解説
スマホサイトなどでもよく使われている標準的なLoadingアニメーションです。
１２個の小さな円を正方形内に回転して配置し、それぞれをタイミングよく、opacity値の変更を行なっています。
非常にシンプルなので、円の形を変えたり、色を変えたりして、応用が聴きやすいソースです。
スタンダード「circle拡縮版」
デモ
ソースコード
<!DOCTYPE html>
<html>
<head>
<style>
.circle-ex{
position:relative;
width:128px;
height:128px;
}
.circle-ex > .dot{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.circle-ex > .dot:after{
content:"";
position:absolute;
left:calc(50% - 10px);
top:0;
width:15%;
height:15%;
border-radius:50%;
background-color:black;
border:0;
margin:0;
padding:0;
font-size:0;
animation: anim-circle-ex-dot 1.2s ease-in-out infinite;
}
.circle-ex > .dot:nth-child(1){transform:rotate(0deg);}
.circle-ex > .dot:nth-child(1):after{animation-delay: 0s;}
.circle-ex > .dot:nth-child(2){transform:rotate(30deg);}
.circle-ex > .dot:nth-child(2):after{animation-delay: -1.1s;}
.circle-ex > .dot:nth-child(3){transform:rotate(60deg);}
.circle-ex > .dot:nth-child(3):after{animation-delay: -1.0s;}
.circle-ex > .dot:nth-child(4){transform:rotate(90deg);}
.circle-ex > .dot:nth-child(4):after{animation-delay: -0.9s;}
.circle-ex > .dot:nth-child(5){transform:rotate(120deg);}
.circle-ex > .dot:nth-child(5):after{animation-delay: -0.8s;}
.circle-ex > .dot:nth-child(6){transform:rotate(150deg);}
.circle-ex > .dot:nth-child(6):after{animation-delay: -0.7s;}
.circle-ex > .dot:nth-child(7){transform:rotate(180deg);}
.circle-ex > .dot:nth-child(7):after{animation-delay: -0.6s;}
.circle-ex > .dot:nth-child(8){transform:rotate(210deg);}
.circle-ex > .dot:nth-child(8):after{animation-delay: -0.5s;}
.circle-ex > .dot:nth-child(9){transform:rotate(240deg);}
.circle-ex > .dot:nth-child(9):after{animation-delay: -0.4s;}
.circle-ex > .dot:nth-child(10){transform:rotate(270deg);}
.circle-ex > .dot:nth-child(10):after{animation-delay: -0.3s;}
.circle-ex > .dot:nth-child(11){transform:rotate(300deg);}
.circle-ex > .dot:nth-child(11):after{animation-delay: -0.2s;}
.circle-ex > .dot:nth-child(12){transform:rotate(330deg);}
.circle-ex > .dot:nth-child(12):after{animation-delay: -0.1s;}
@keyframes anim-circle-ex-dot{
0%{transform:scale(0.0);}
35%{transform:scale(1.0);}
70%{transform:scale(0.0);}
100%{transform:scale(0.0);}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Circle-ex</h1>
<div class="circle-ex">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>
解説
circleの円を透明度アニメから、拡大・縮小アニメに切り替えただけのモノですが、印象がガラッと変わるので、読み込みで使うと少し深みが出そうです。
スタンダード「CUBE」
デモ
ソースコード
<!DOCTYPE html>
<html>
<head>
<style>
.cube{
position:relative;
width:128px;
height:128px;
transform:scale(0.5);
}
.cube > .grid{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.cube > .grid:after{
content:"";
position:absolute;
width:33%;
height:33%;
background-color:black;
border:0;
margin:0;
padding:0;
font-size:0;
animation: anim-cube-grid 1.5s ease-in-out infinite;
}
.cube > .grid:nth-child(1){top:0; left:0;}
.cube > .grid:nth-child(2){top:0; left:33%;}
.cube > .grid:nth-child(3){top:0; left:66%;}
.cube > .grid:nth-child(4){top:33%;left:0;}
.cube > .grid:nth-child(5){top:33%;left:33%;}
.cube > .grid:nth-child(6){top:33%;left:66%;}
.cube > .grid:nth-child(7){top:66%;left:0;}
.cube > .grid:nth-child(8){top:66%;left:33%;}
.cube > .grid:nth-child(9){top:66%;left:66%;}
.cube > .grid:nth-child(1):after{animation-delay: -0.2s;}
.cube > .grid:nth-child(2):after{animation-delay: -0.1s;}
.cube > .grid:nth-child(3):after{animation-delay: -0.0s;}
.cube > .grid:nth-child(4):after{animation-delay: -0.3s;}
.cube > .grid:nth-child(5):after{animation-delay: -0.2s;}
.cube > .grid:nth-child(6):after{animation-delay: -0.1s;}
.cube > .grid:nth-child(7):after{animation-delay: -0.4s;}
.cube > .grid:nth-child(8):after{animation-delay: -0.3s;}
.cube > .grid:nth-child(9):after{animation-delay: -0.2s;}
@keyframes anim-cube-grid{
0%{transform:scale(1.0);}
25%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(1.0);}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Cube-Grid</h1>
<div class="cube">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
</body>
</html>
解説
フラットデザインに合いそうなLoadingですが、意外とシンプルな構造になっています。
アニメーションタイミングが少し独特なので、タイミングを変えたいときは、内容を熟知して行なってください。
一つ一つのCUBEエレメントに文字を挿入してみても面白い効果が出るかもしれませんね。
0 件のコメント:
コメントを投稿