css3 ajax加载进度线

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