加载中三个点点动态出现

Posted 2021-12-13 anne3

js定时器方法

//html
<div>加载中<span id="dot"></span></div>

//js
<script>
 let dotting = function () {
        let dom = document.getElementById(‘dot‘);
        let html = dom.innerHTML;
        if(html.length >= 3){
            dom.innerHTML = ‘‘
        } else {
            dom.innerHTML = html + ‘.‘
        }
    }
    setInterval(dotting, 800)

</script>

 

方法都来自于网上其他博客　　

css3 anminate方法　　

方法1:

//html
<div>加载中<span id="dot">...</span></div>

//css
<style>　　
#dot {
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
    animation: dotting 3s infinite step-start;
}
@keyframes dotting{
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
</style>

　　

方法2:　　这个方法的好处是可以方便的设置大小

//html
<div>加载中<span id="dot"></span></div>
//css
<style>
#dot{
    height: 4px;
    width: 4px;
    display: inline-block;
    border-radius: 2px;
    animation: dotting 2.4s  infinite step-start;
}
@keyframes dotting {
    25%{
        box-shadow: 4px 0 0 #000;
    }
    50%{
        box-shadow: 4px 0 0 #000000 ,14px 0 0 #000;
    }
    75%{
        box-shadow: 4px 0 0 #000 ,14px 0 0 #000, 24px 0 0 #000;
    }
}
</style>

　　

还有其他很多种方法啦，效果出来就行