JS实现进度条动态加载特效

本文实例为大家分享了JS实现进度条动态加载的具体代码，供大家参考，具体内容如下

 
 
 
 
 .container{
 width: 480px;
 margin: 50px;
 }
 .progressBar {
 display: inline-block;
 width: 81%;
 height: 22px;
 background-color: rgba(0,0,0,0.4);
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 margin-right: 3%;
 }
 #progressFill {
 width: 0%;
 height: 22px;
 position: relative;
 background-color: #40A4C2;
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 background-size: 3em 3em;
 background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #57D1F7 0.9em, #57D1F7 2.1em, transparent 2.1em, transparent 2.9em, #57D1F7 3.1em);
 -webkit-animation: warning-animation 750ms infinite linear;
 -moz-animation: warning-animation 750ms infinite linear;
 animation: warning-animation 750ms infinite linear;
 }
 #progressFill:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 height: 100%;
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 background-image: linear-gradient(to bottom, #40A4C2, rgbA(37, 117, 188, 0.8) 15%, transparent 60%, #40A4C2);
 }
 @-moz-keyframes warning-animation {
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 3em 0;
 }
 }
 @-webkit-keyframes warning-animation {
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 3em 0;
 }
 }
 @-ms-keyframes warning-animation {
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 3em 0;
 }
 }
 @-o-keyframes warning-animation {
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 3em 0;
 }
 }
 @keyframes warning-animation {
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 3em 0;
 }
 }
 .progressText, #percentage {
 display: inline-block;
 margin-top: -11px;
 vertical-align: middle;
 }
  


 点击开始
 
 
 
 
  进度 
 0%
  

进度条动态加载效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。