react 实现 loading 动效圈，支持配置转一圈的 duration

Z时代
2024-01-10
分类：综合

react

本文地址： https:////www.cnblogs.com/veinyin/p/12442768.html

需求：圆环从无到整，变成整圈后要有个渐隐效果

实现效果如下左右两个半圆相接处有一条灰色的边这个暂时还没解决

实现思路：

1. 左右两个半圆拼接成一个整圆，圆环通过 border 实现，最后 animation 实现动画效果

2. 先旋转右半边，0-45%旋转显示右半圆，45%-90%等待左半圆绘制，90%-100%等待整个圆渐隐

3. 然后旋转左半边，0-45%不显示，45%-90%旋转显示左半圆，90%-100%等待整个圆渐隐

4. 90%-100% 整体渐隐

5. 动画时间写死不方便其他需求复用，在行内设置 animation-duration 属性即可。为便于与定时器用同一个变量，duration 配置时单位为 ms

具体实现代码如下默认是动画时间是5s

react 组件

 1 import React from 'react'
 2 
 3 import classNames from 'classnames'
 4 import styles from './index.module.less'
 5 
 6 const LoadingCircle = (props: { description?: string; duration?: number | string }): JSX.Element => {
 7     const { description = '数据加载中...', duration = 5000 } = props
 8     return (
 9         <div className="flex">
10             <div className={styles.loader}>
11                 <div className={styles.wrapper} style={{ animationDuration: `${duration}ms` }}>
12                     <div className={styles.halfBox} style={{ right: 0 }}>
13                         <div
14                             className={classNames(styles.circle, styles.right)}
15                             style={{ animationDuration: `${duration}ms` }}
16                         ></div>
17                     </div>
18                     <div className={styles.halfBox} style={{ left: 0 }}>
19                         <div
20                             className={classNames(styles.circle, styles.left)}
21                             style={{ animationDuration: `${duration}ms` }}
22                         ></div>
23                     </div>
24                 </div>
25             </div>
26             <span style={{ fontSize: 12, color: '#666666' }}>{description}</span>
27         </div>
28     )
29 }
30 
31 export default LoadingCircle

View Code

样式

 1 .loader {
 2     position: relative;
 3     left: -3px;
 4     margin-right: 3px;
 5     .wrapper {
 6         width: 16px;
 7         height: 16px;
 8         position: relative;
 9         animation: show_hide 5s linear infinite;
10     }
11     .halfBox {
12         width: 8px;
13         height: 16px;
14         position: absolute;
15         top: 0;
16         overflow: hidden;
17     }
18     .circle {
19         width: 16px;
20         height: 16px;
21         border-radius: 50%;
22         position: absolute;
23         top: 0;
24         transform: rotate(45deg);
25     }
26     .right {
27         border: 2px solid transparent;
28 
29         border-top: 2px solid #2b6dff;
30         border-right: 2px solid #2b6dff;
31         right: 0;
32 
33         animation: right_circle 5s linear infinite;
34     }
35     .left {
36         border: 2px solid transparent;
37         border-bottom: 2px solid #2b6dff;
38         border-left: 2px solid #2b6dff;
39         left: 0;
40         animation: left_circle 5s linear infinite;
41     }
42     @keyframes right_circle {
43         0% {
44             transform: rotate(-135deg);
45         }
46         45%,
47         90% {
48             transform: rotate(45deg);
49         }
50         50%,
51         100% {
52             transform: rotate(45deg);
53         }
54     }
55     @keyframes left_circle {
56         0%,
57         45% {
58             transform: rotate(-135deg);
59         }
60         90% {
61             transform: rotate(45deg);
62         }
63         100% {
64             transform: rotate(45deg);
65         }
66     }
67     @keyframes show_hide {
68         0%,
69         90% {
70             opacity: 1;
71         }
72         100% {
73             opacity: 0;
74         }
75     }
76 }