最近想了想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補充待續

css3 ajax加載進度線