Chia Yi Lai

Loading by pure CSS

  • 用 :before 和 :after 產生兩個圓形一左一右水平移動。
  • 圓形用 absolute 定位,.loading 高度維持和內容一樣,方便在插入在不同元素中。
  • $primary 和 $secondary 帶入網站的主要顏色,讓 loading 的樣式也和網站一致。
  • $loading-size 可隨意調整圓形大小。

See the Pen Loading by pure CSS by Chia Yi Lai (@ChiaYiLai) on CodePen.

keyboard_arrow_up