使用CSS3实现loading效果

效果展示

具体实现

示例完全是使用 html+CSS3 实现，主要是用到了 CSS3 的 animate 和animate-delay属性。

html 代码如下：

div class="container">
  span style="--i:0">span>
  span style="--i:1">span>
  span style="--i:2">span>
  span style="--i:3">span>
  span style="--i:4">span>
  span style="--i:5">span>
  span style="--i:6">span>
  span style="--i:7">span>
  span style="--i:8">span>
  span style="--i:9">span>
  span style="--i:10">span>
  span style="--i:11">span>
  span style="--i:12">span>
  span style="--i:13">span>
  span style="--i:14">span>
  span style="--i:15">span>
  span style="--i:16">span>
  span style="--i:17">span>
  span style="--i:18">span>
  span style="--i:19">span>
  span style="--i:20">span>
  span style="--i:21">span>
  span style="--i:22">span>
  span style="--i:23">span>
  span style="--i:24">span>
  span style="--i:25">span>
  span style="--i:26">span>
  span style="--i:27">span>
  span style="--i:28">span>
  span style="--i:29">span>
  span style="--i:30">span>
  span style="--i:31">span>
  span style="--i:32">span>
  span style="--i:33">span>
  span style="--i:34">span>
  span style="--i:35">span>
  span style="--i:36">span>
  span style="--i:37">span>
  span style="--i:38">span>
  span style="--i:39">span>
  span style="--i:40">span>
  span style="--i:41">span>
  span style="--i:42">span>
  span style="--i:43">span>
  span style="--i:44">span>
  span style="--i:45">span>
  span style="--i:46">span>
  span style="--i:47">span>
  span style="--i:48">span>
  span style="--i:49">span>
div>

代码有点冗余，写了 50 个 span 元素，当然可以使用 javascript 去循环生成，再插入到 DOM中。这段代码就是给每个 span 元素绑定了 --i 值，每个 span 元素就是效果中的变色部分，之所以用 --i 时方便在设置 span 元素样式时使用 var(--i) 变量来给 span 动态设置样式。

CSS3 代码如下：

style>
  span {
    display: inline-flex;
    width: 32px;
    height: 6px;
    background-color: #2c4766;
    border-radius: 8px;
    position: absolute;
    left: 0;
    transform-origin: 128px;
    transform: rotate(calc(var(--i) * (360deg / 50)));
    animation: animateBlink 1s linear infinite; 
    animation-delay: calc(
      (var(--i) * (1s / 50))
    ); 
  }

  @keyframes animateBlink {
    0% {
      background-color: #0ef;
    }
    25% {
      background-color: #2c4766;
    }
  }
style>

这段代码总共做了两件事，设置 span 的旋转角度和定义 animateBlink 动画并绑定。

旋转 span

通过 --i 变量设置每个 span 元素的旋转角度，均匀分布在一个环上。

设置中心点

transform-origin: [] [] [];

效果如下

动画

这段代码就是定义了一个 animateBlink 动画，循环匀速执行动画，动画完全执行一轮时间持续 1s。