css3 ajax加载进度线

最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了

<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();

}

转载于:https://www.cnblogs.com/Grewer/p/7854173.html