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

来源：互联网发布：淘宝联盟高佣金编辑：程序博客网时间：2024/06/05 04:17

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

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

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

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

直接贴代码

    <div class="loadframe">        <div></div>        <div></div>        <div></div>    </div>

        .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元素就行了

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

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

阅读全文

0 0