react框架下基于css动画完成加载组件开发

本文基于react框架进行

HTML部分

import './loadingpoint.less';
import React from 'react';
const ClassNames = {
    loading: 'loading-point',
};

class LoadingPoint extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.text,
            size: props.size,
            fontSize: props.fontSize,
        };
    }
    render() {
        const fontSize = {
            medium: '20px',
            small: '16px',
            mini: '12px',
        };
        return (
            <div className={`${ClassNames.loading}`}>
                <span
                    className={`${ClassNames.loading}-text`}
                    style={{
                        '--selection-text-size': this.state.fontSize,
                    }}
                >
                    {this.state.text}
                </span>
                <div
                    className={`${ClassNames.loading}-items`}
                    style={{
                        '--selection-point-size': fontSize[this.state.size],
                    }}
                >
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                    <span className={`${ClassNames.loading}-point`}></span>
                </div>
            </div>
        );
    }
}
export default LoadingPoint;

css

:root{
  --selection-point-size:16px;
  --selection-text-size:20px;
}
@backColor:#f1f1f1;
@deeperColor:rgb(38, 136, 153);
@mediumColor:rgb(50, 185, 209);
@lighterColor:rgb(193, 224, 230);
.loading-point{
    width: 50%;
    height: 100px;
    background: white;
    padding: 30px;
    margin: 30px auto;
    .loading-point-text{
      font-size: var(--selection-text-size);
    }
    .loading-point-items{
      min-width: 300px;
      height: 30px;
      display: flex;
      justify-content: center;
      margin: 30px 0;
      
      .loading-point-point{
        width: var(--selection-point-size);
        height: var(--selection-point-size);
        border-radius: 50%;
        background-color: @backColor;
        display: block;
        margin:0 10px;
        animation: 2.5s  infinite  loadingPoint;
      }
      .loop(9);
      .loop(@i) when (@i > 1) {
        .loop((@i - 1));    // 递归调用自身
        .loading-point-point:nth-child(@{i}) {
          animation-delay: 0.2s *@i;
        }
      }
      
    }
  }
 

@keyframes loadingPoint {
    1% {
      background-color: @backColor;
    }
    20% {
      background-color: @lighterColor;
    }
    30% {
      background-color: @mediumColor;
    }
   
   
  }

应用：

 <Loadingpoint
       text="Page Loading..."
        size="small"
        fontSize="24px"
></Loadingpoint>