cssのanimationを使ったローディングサンプル。
ドットで作った円がぐるぐる回るローディングです。
<div class="cp_loading09"></div>.cp_loading09 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_loading09:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
-webkit-animation: loading09 1500ms infinite cubic-bezier(.32,.17,.57,.9);
animation: loading09 1500ms infinite cubic-bezier(.32,.17,.57,.9);
border-radius: 0.5em;
box-shadow: #F8BBD0 1.5em 0 0 0,
#D1C4E9 1.1em 1.1em 0 0,
#BBDEFB 0 1.5em 0 0,
#B2EBF2 -1.1em 1.1em 0 0,
#C8E6C9 -1.5em 0 0 0,
#F0F4C3 -1.1em -1.1em 0 0,
#FFECB3 0 -1.5em 0 0,
#FFCCBC 1.1em -1.1em 0 0;
}
@-webkit-keyframes loading09 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading09 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info