环式加载（rings loader ）

Super_Calvin

于 2020-03-02 16:02:54 发布

阅读量258

点赞数

分类专栏： # 动态构件文章标签： rings loader 环式加载 HTML css loading

本文链接：https://blog.csdn.net/weixin_45544796/article/details/104613424

版权

环式加载

示例
HTML
CSS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

.loader(style=`--bg: hsl(${Math.random() * 360}, 100%, 85%)`)
  - let i = 0
  while i < 8
    .dot(style=`--index: ${i}`)
    - i++

CSS

*
  box-sizing border-box


body
  align-items center
  background-color #111
  display flex
  justify-content center
  min-height 100vh
  overflow-x hidden


:root
  --dot-size 5
  --speed 1.5
  --radius 10
  --center-size 5
  --rotation -25
  --ring-radius 8
  --ring-thickness .75
  --bg hsl(10, 100%, 85%)


.loader
  position relative
  height calc(var(--dot-size) * var(--center-size) * 1px)
  width calc(var(--dot-size) * var(--center-size)