环式加载（rings loader ）

示例

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) * 1px)
  animation turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear
  &:before
    content ''
    position absolute
    top 50%
    left 50%
    background var(--bg)
    height 100%
    width 100%
    transform translate(-50%, -50%)
    border-radius 100%
    animation pulse calc(var(--speed) * 1s) infinite alternate-reverse


.dot
  height calc(var(--dot-size) * 1px)
  width calc(var(--dot-size) * 1px)
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%) rotate(calc((360 / 8) * var(--index) * 1deg)) translate(0, calc(var(--dot-size) * var(--radius) * 1px))


  &:after
  &:before
    content ''
    border-radius 100%
    box-sizing border-box
    position absolute
    background none
    top 50%
    left 50%
    animation-duration calc(var(--speed) * 1s)
    animation-delay calc((8 - var(--index)) * (var(--speed) / 8) * -1s)
    animation-iteration-count infinite
    animation-timing-function ease-in-out
    animation-fill-mode both
    transform translate(-50%, -50%) scale(var(--scale))


  &:after
    --dot-size 5
    --ring-thickness .75
    --ring-radius 8
    --scale 0
    animation-name load
    border calc(var(--dot-size) * var(--ring-thickness) * 1px) solid var(--bg)
    height calc(var(--dot-size) * var(--ring-radius) * 1px)
    width calc(var(--dot-size) * var(--ring-radius) * 1px)


  &:before
    --scale 1
    animation-name fade
    background var(--bg)
    height 100%
    width 100%


@keyframes fade
  0%
    opacity 1
  85%, 100%
    opacity .2


@keyframes load
  0%
    transform translate(-50%, -50%) scale(0)
  85%, 100%
    transform translate(-50%, -50%) scale(1)
    opacity 0


@keyframes pulse
  to
    opacity 0.35


@keyframes turn
  to
    transform rotate(-360deg)

更多有趣示例 尽在 小红砖社区https://xhz.bos.xyz