浏览器和移动端都能通用的html5进度条加载

新建html文档。

书写hmtl代码。

书写通用css代码。

书写css3代码。#caseVerte #case1 { height : 10px; width : 100px; background-color : #fbfbfb; animation : case1 2.25s infinite; -webkit-animation : case1 2.25s infinite; }#caseBleu #case1 { height : 10px; width : 100px; background-color : #0086a6; animation : case1 2.25s infinite; -webkit-animation : case1 2.25s infinite; } @-webkit-keyframes case1 {  0% {width : 0%;} 50% {width : 90px;} 100% {width : 0%;}} @keyframes case1 {  0% {width : 0%;} 50% {width : 90px;} 100% {width : 0%;}}#caseVerte #case2 { height : 10px; width : 10px; background-color : #fbfbfb; animation : case2 2s infinite; -webkit-animation : case2 2s infinite; }#caseBleu #case2 { height : 10px; width : 10px; background-color : #0086a6; animation : case2 2s infinite; -webkit-animation : case2 2s infinite; } @-webkit-keyframes case2 {  0% {width : 0%;} 50% {width : 100px;} 100% {width : 0%;}} @keyframes case2 {  0% {width : 0%;} 50% {width : 100px;} 100% {width : 0%;}}#caseVerte #case3 { height : 10px; width : 10px; background-color : #fbfbfb; animation : case3 1.75s infinite; -webkit-animation : case3 1.75s infinite; }#caseBleu #case3 { height : 10px; width : 10px; background-color : #0086a6; animation : case3 1.75s infinite; -webkit-animation : case3 1.75s infinite; } @-webkit-keyframes case3 {  0% {width : 0%;} 50% {width : 95px;} 100% {width : 0%;}} @keyframes case3 {  0% {width : 0%;} 50% {width : 95px;} 100% {width : 0%;}}#caseVerte #case4 { height : 10px; width : 10px; background-color : #fbfbfb; animation : case3 2.5s infinite; -webkit-animation : case3 2.5s infinite; }#caseBleu #case4 { height : 10px; width : 10px; background-color : #0086a6; animation : case3 2.5s infinite; -webkit-animation : case3 2.5s infinite; } @-webkit-keyframes case4 {  0% {width : 0%;} 50% {width : 80px;} 100% {width : 0%;}}  @keyframes case4 {  0% {width : 0%;} 50% {width : 80px;} 100% {width : 0%;}} #caseVerte #case5 { height : 10px; width : 10px; background-color : #fbfbfb; animation : case3 1.5s infinite; -webkit-animation : case3 1.5s infinite; } #caseBleu #case5 { height : 10px; width : 10px; background-color : #0086a6; animation : case3 1.5s infinite; -webkit-animation : case3 1.5s infinite; }  @-webkit-keyframes case5 {  0% {width : 0%;} 50% {width : 105px;} 100% {width : 0%;}}   @keyframes case5 {  0% {width : 0%;} 50% {width : 105px; 100% {width : 0%;}  #caseVerte #case6 { height : 10px; width : 10px; background-color : #fbfbfb; animation : case3 5s infinite; -webkit-animation : case3 5s infinite; }  #caseBleu #case6 { height : 10px; width : 10px; background-color : #0086a6; animation : case3 5s infinite; -webkit-animation : case3 5s infinite; }   @-webkit-keyframes case6 {  0% {width : 0%;} 50% {width : 75px;} 100% {width : 0%;}}  @keyframes case6 {  0% {width : 0%;} 50% {width : 75px;} 100% {width : 0%;}}

代码整体结构。

查看效果。