auto 完成 fin 500px frame round log string star
最近想了想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加载进度线
auto 完成 fin 500px frame round log string star
原文:http://www.cnblogs.com/Grewer/p/7854173.html
来源: http://www.bubuko.com/infodetail-2399029.html