index.tsx

/**
 * 预加载动画
 * 小球跳动加载(页面级)
 * 徐立
 * 2020.2.18
 */
import React  from 'react'
import styles from './style.less';
export default function LoadThree() {
    return (
        <div className={styles.ani6}>
            <div className={[`${styles.wrap_preload}`,`${styles.circle_ball}`].join(' ')}>
                <div className={styles.overlay}></div>
                <div className={styles.wrap_content}>
                    <div className={styles.wrap_circle_ball}>
                    <div className={styles.wrap_ball}>
                        <div className={[`${styles.ball}`,`${styles.ball_top}`].join(' ')}></div>
                        <div className={[`${styles.ball}`,`${styles.ball_top}`].join(' ')}></div>
                    </div>
                    <div className={styles.wrap_ball}>
                        <div className={[`${styles.ball}`,`${styles.ball_bot}`].join(' ')}></div>
                        <div className={[`${styles.ball}`,`${styles.ball_bot}`].join(' ')}></div>
                    </div>
                    <div className={styles.wrap_effect}>
                        <div className={styles.wrap_circle}>
                        <div className={[`${styles.circle_effect}`,`${styles.left}`].join(' ')}></div>
                        <div className={[`${styles.circle_effect}`,`${styles.left}`].join(' ')}></div>
                        </div>
                        <div className={styles.wrap_circle}>
                        <div className={[`${styles.circle_effect}`,`${styles.right}`].join(' ')}></div>
                        <div className={[`${styles.circle_effect}`,`${styles.right}`].join(' ')}></div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    )
}