css3 ajax加载进度线

Posted 2020-10-14 Grewer

最近想了想ajax加载时的进度选项,今天用css3来实现下,后面再补上js的应用,来完成兼容;

<button onclick="start()">button</button>
<p id="string"></p>

body{
    width: 500px
}
#string {
    width: 0%;
    height: 2px;
    width: 100%;
    margin: 0;
    background-color: #1592ef;
}
@keyframes loading {
    0% {
        width: 0%;
    }
    10% {
        width: 90%;
    }
    100%{
        width: 100%;
    }

}
@keyframes finish{
    from{
        width: auto;
    }
    to {
        width: 100%;
    }
}

function start() {
    var aj = new XMLHttpRequest();
    aj.open("get", ‘./my.php‘);
    var obj = document.getElementById(‘string‘);

    obj.style.animation= ‘loading 10s‘;
    
    aj.onreadystatechange = function() {

        if (aj.readyState == 4 ) {
            obj.style.animation = ‘finish 0.5s‘;
            
            if( aj.status == 200){
                console.log(aj.responseText);
            }
            
        }


    }

    aj.send();

}

js补充待续