cssのanimationを使ったローディングサンプル。
横に並んだドットが一つずつ弾んでいくローディングです。
<div class="cp_loading12">
<div class="cp_item"></div>
<div class="cp_item"></div>
<div class="cp_item"></div>
<div class="cp_item"></div>
<div class="cp_item"></div>
</div>.cp_loading12 {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_loading12 .cp_item {
display: inline-block;
width: 8px;
height: 8px;
-webkit-animation: loading12 1.8s infinite cubic-bezier(.51,.35,.71,.55);
animation: loading12 1.8s infinite cubic-bezier(.51,.35,.71,.55);
opacity: 0.3;
border-radius: 50%;
}
.cp_loading12 .cp_item:nth-child(1) {
background: #E91E63;
}
.cp_loading12 .cp_item:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
background: #E91E63;
}
.cp_loading12 .cp_item:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
background: #673AB7;
}
.cp_loading12 .cp_item:nth-child(4) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
background: #03A9F4;
}
.cp_loading12 .cp_item:nth-child(5) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
background: #4CAF50;
}
@-webkit-keyframes loading12 {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
35% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 0.3;
filter: alpha(opacity=30);
}
50% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0.8;
filter: alpha(opacity=80);
}
70% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 0.8;
filter: alpha(opacity=80);
}
85% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
@keyframes loading12 {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
35% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 0.3;
filter: alpha(opacity=30);
}
50% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0.8;
filter: alpha(opacity=80);
}
70% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 0.8;
filter: alpha(opacity=80);
}
85% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info