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

Posted 2021-03-06 veinyin

本文地址： 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 }

View Code

 

 END~~~≥ω≤