udemy動画内容の備忘録・メモです
- ５つの縦線を設置し、それぞれに遅延時間を設ける。
- timing-iteration-count: infiniteで永久にアニメーション。
index.html
<divclass="rect-spinner"><div></div><div></div><div></div><div></div><div></div></div>Scss記法
style.scss
.rect-spinner{margin:100pxauto;width:50px;height:40px;text-align:center;letter-spacing:-2px;&>div{background-color:#333;height:100%;width:6px;display:inline-block;@includeanimation($name:sk-stretchdelay,$duration:1.2s,$iteration-count:infinite,$timing-function:ease-in-out);@for$ifrom1through5{&:nth-child(#{$i}){animation-delay:-1.3s+$i*0.1s;}}}}@keyframessk-stretchdelay{0%,40%,100%{transform:scaleY(0.4);}20%{transform:scaleY(1);}}