アニメーションするシンプルなローディングアイコン

Result

See the Pen <a href='https://codepen.io/kachibito/pen/RxbpdY/'>CSS Loding animations</a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

css

.face-load div{/*１つ１つのバーの太さや高さ*/
  width:6px;
  height:30px;
  background:#fff;
  margin-right:2px
}
@keyframes face-load {/*継続してアニメーションさせる設定。要素の拡大/縮小と透過/非透過を繰り返す*/
    0%,100% {
        transform: scaley(1);
        opacity:1
    }
    50% {
        transform: scaley(.4);
       opacity:0.1
    }
}
 
.face-load>div:nth-child(1) {/*１つずつバーのアニメーション発火時間を設定し、少しずつずらす*/
    animation: face-load 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)
}
 
.face-load>div:nth-child(2) {
    animation: face-load 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)
}
 
.face-load>div:nth-child(3) {
    animation: face-load 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)
}
 
.face-load>div:nth-child(4) {
    animation: face-load 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)
}
 
.face-load>div {
    animation-fill-mode: both
}

html

<div class="face-load">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

via

CSS Loding animations

Result

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code