[パーツ]ローディング ドットで作った円が消えながらぐるぐる回るローディング

CSS HTML
 2018.03.14
 2018.03.23

ドットで作った円が消えながらぐるぐる回るローディング

cssのanimationを使ったローディングサンプル。
ドットで作った円が消えながらぐるぐる回るローディングです。

browser:  65 11 20 10 
ニャン易度 
<div class="cp_loading10">
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
<div class="cp_cont"><div class="cp_item"></div></div>
</div>
.cp_loading10 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_loading10 .cp_cont {
position: absolute;
top: calc(50% - 10px/2);
left: calc(50% - 10px/2);
-webkit-transform-origin: -150% 50%;
transform-origin: -150% 50%;
}
.cp_loading10 .cp_cont .cp_item {
width: 10px;
height: 10px;
-webkit-animation: loading10 2s infinite cubic-bezier(.16,.69,.85,.54);
animation: loading10 2s infinite cubic-bezier(.16,.69,.85,.54);
-webkit-animation-delay: inherit;
animation-delay: inherit;
border-radius: 50%;
background: #ab47bc;
}
.cp_loading10 .cp_cont:nth-of-type(0n+1) {
-webkit-transform: translateX(200%) rotate(-90deg);
transform: translateX(200%) rotate(-90deg);
-webkit-animation-delay: -1.5s;
animation-delay: -1.5s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+2) {
-webkit-transform: translateX(200%) rotate(-45deg);
transform: translateX(200%) rotate(-45deg);
-webkit-animation-delay: -1.375s;
animation-delay: -1.375s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+3) {
-webkit-transform: translateX(200%);
transform: translateX(200%);
-webkit-animation-delay: -1.25s;
animation-delay: -1.25s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+4) {
-webkit-transform: translateX(200%) rotate(45deg);
transform: translateX(200%) rotate(45deg);
-webkit-animation-delay: -1.125s;
animation-delay: -1.125s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+5) {
-webkit-transform: translateX(200%) rotate(90deg);
transform: translateX(200%) rotate(90deg);
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+6) {
-webkit-transform: translateX(200%) rotate(135deg);
transform: translateX(200%) rotate(135deg);
-webkit-animation-delay: -0.875s;
animation-delay: -0.875s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+7) {
-webkit-transform: translateX(200%) rotate(180deg);
transform: translateX(200%) rotate(180deg);
-webkit-animation-delay: -0.75s;
animation-delay: -0.75s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+8) {
-webkit-transform: translateX(200%) rotate(225deg);
transform: translateX(200%) rotate(225deg);
-webkit-animation-delay: -0.625s;
animation-delay: -0.625s;
}
@keyframes loading10 {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?