# [Practice] CSS: Loaders

之前社群有分享一個很棒的網站：[**CSS loaders and Spinners**](https://cssloaders.github.io/)
<a href="https://cssloaders.github.io/" title="CSS Loaders"><img src="https://i.imgur.com/BI7nR8g.png" style="width: 40vw;"/></a>
<br/>

-----
網站有各種loading的CSS語法，這次跟著做一些比較常見的CSS loading的語法練習，也有替其中幾個加入一點點變化、觀察效果，之後也會繼續練習其他變化比較多的，demo如下：
<iframe height="476" style="width: 100%;" scrolling="no" title="Loader" src="https://codepen.io/urlun0404/embed/GRXQgZR?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/urlun0404/pen/GRXQgZR">
  Loader</a> by urlun0404 (<a href="https://codepen.io/urlun0404">@urlun0404</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>