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

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

import React from 'react'

import classNames from 'classnames'
import styles from './index.module.less'

const LoadingCircle = (props: { description?: string; duration?: number | string }): JSX.Element => {
    const { description = '数据加载中...', duration = 5000 } = props
    return (
        <div className="flex">
            <div className={styles.loader}>
                <div className={styles.wrapper} style={{ animationDuration: `${duration}ms` }}>
                    <div className={styles.halfBox} style={{ right: 0 }}>
                        <div
                            className={classNames(styles.circle, styles.right)}
                            style={{ animationDuration: `${duration}ms` }}
                        ></div>
                    </div>
                    <div className={styles.halfBox} style={{ left: 0 }}>
                        <div
                            className={classNames(styles.circle, styles.left)}
                            style={{ animationDuration: `${duration}ms` }}
                        ></div>
                    </div>
                </div>
            </div>
            <span style={{ fontSize: 12, color: '#666666' }}>{description}</span>
        </div>
    )
}

export default LoadingCircle

样式

.loader {
    position: relative;
    left: -3px;
    margin-right: 3px;
    .wrapper {
        width: 16px;
        height: 16px;
        position: relative;
        animation: show_hide 5s linear infinite;
    }
    .halfBox {
        width: 8px;
        height: 16px;
        position: absolute;
        top: 0;
        overflow: hidden;
    }
    .circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        transform: rotate(45deg);
    }
    .right {
        border: 2px solid transparent;

        border-top: 2px solid #2b6dff;
        border-right: 2px solid #2b6dff;
        right: 0;

        animation: right_circle 5s linear infinite;
    }
    .left {
        border: 2px solid transparent;
        border-bottom: 2px solid #2b6dff;
        border-left: 2px solid #2b6dff;
        left: 0;
        animation: left_circle 5s linear infinite;
    }
    @keyframes right_circle {
        0% {
            transform: rotate(-135deg);
        }
        45%,
        90% {
            transform: rotate(45deg);
        }
        50%,
        100% {
            transform: rotate(45deg);
        }
    }
    @keyframes left_circle {
        0%,
        45% {
            transform: rotate(-135deg);
        }
        90% {
            transform: rotate(45deg);
        }
        100% {
            transform: rotate(45deg);
        }
    }
    @keyframes show_hide {
        0%,
        90% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
}

 END~~~≥ω≤