红豆稀饭
0%

快速实现一个加载菊花组件

发表于 更新于 阅读次数： Valine：

QQ20210723-112217.gif

原理

画了12个指针，然后12个指针颜色透明度依次暗淡，30°角度旋转排列，然后设置CSS动画，每次循环用时0.8秒，无限循环次数，每次循环采用步进式每次12步，线性进行，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// SpinnerLoading.tsx
import React from "react";
import style from './index.module.scss'

const SpinnerLoading = () => {
  return (
    <span className={style.spinner}>
      {
        new Array(12).fill(Math.random()).map((v, index) => (
          <i key={v} style={{
            transform: `rotate(${30 * (index + 1)}deg)`,
            opacity: 1 - (index / 16),
          }}></i>
        ))
      }
    </span>
  )
}

export default SpinnerLoading

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// index.module.scss
.spinner {
  position: relative;
  display: inline-block;
  width: 30px;
  max-width: 100%;
  height: 30px;
  max-height: 100%;
  vertical-align: middle;
  animation: infinite circle 800ms  linear;
  animation-timing-function: steps(12);
  i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    &::after {
      display: block;
      width: 2px;
      height: 25%;
      margin: 0 auto;
      background-color: currentColor;
      border-radius: 40%;
      content: ' ';
    }
  }
}
@keyframes circle {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}