一个简单实用的的加载动画（跳点效果）

每天看视频的时候，等待加载视频的时候总会看见三个点在不停的徘徊

这时候不得不感慨网速真慢

让我盯着三个小圆点看这么久

然后就在想怎么写的，就试了下下

直接贴代码

        .loadframe{
            position: absolute;
            width: 300px;
            height:100px;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -50px;
        }

        .loadframe div{
            width: 80px;
            height: 80px;
            background: gray; 
            opacity: 0.5;
            float: left;
            margin: 10px;
            border-radius: 50%;
            z-index: 999;
        }

        .loadframe div.active{
            opacity: 1;
        }

        var loadframe = document.getElementsByClassName('loadframe')[0];
        var load = loadframe.getElementsByTagName('div');
        var len = load.length;
        var index = 0;

        function move(i) {
            var curIndex = (index + i + len) % len;
            var preIndex = (index - 1 + i + len) % len;
            var nextIndex = (index + 1 + i + len) % len;
            load[curIndex].className = 'active';
            load[preIndex].className = '';
            load[nextIndex].className = '';
            
            // for(var i = 0; i < len; i++){
            //     if(i != curIndex){
            //         load[i].className = '';
            //     }else{
            //         load[i].className = 'active';
            //     }
            // }
            index = curIndex;
        }

        setInterval(function(){
            move(1);
        }, 250);

这就是一个简单的加载小圆点动画了，大家可以根据运用场景来取消定时器然后remove元素就行了

一个简单效果，样式啥的大家可以自行发挥

注释的代码主要是针对多个点的情况哈，大家择优选取，反正我感觉三个点够了哈