cssのanimationを使ったローディングサンプル。
4つの丸が一つ一つ移動して消えていくローディングです。
<div class="cp_loading08">
<div class="cp_item"></div>
</div>.cp_loading08 {
position: absolute;
top: 50%;
left: 50%;
width: 35px;
height: 35px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_loading08 .cp_item:not(:required) {
display: inline-block;
width: 4px;
height: 4px;
-webkit-transition: 0.3s all;
transition: 0.3s all;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: loading08 5s infinite cubic-bezier(.11,.75,.88,.44);
animation: loading08 5s infinite cubic-bezier(.11,.75,.88,.44);
opacity: 1;
border-radius: 100%;
background: transparent;
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
filter: alpha(opacity=100);
}
.cp_loading08 .cp_item {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
@-webkit-keyframes loading08 {
0% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
8.33% {
box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
16.67% {
box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px 10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
25% {
box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
33.33% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 -10px -10px 0 5px;
}
41.67% {
box-shadow: #f06292 10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
50% {
box-shadow: #f06292 10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
58.33% {
box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
66.67% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px -10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
75% {
box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
83.33% {
box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 10px 10px 0 5px;
}
91.67% {
box-shadow: #f06292 -10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
100% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
}
@keyframes loading08 {
0% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
8.33% {
box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
16.67% {
box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px 10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
25% {
box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
33.33% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 -10px -10px 0 5px;
}
41.67% {
box-shadow: #f06292 10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
50% {
box-shadow: #f06292 10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
58.33% {
box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
66.67% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px -10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
75% {
box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
}
83.33% {
box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 10px 10px 0 5px;
}
91.67% {
box-shadow: #f06292 -10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
100% {
box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info