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

2020年03月25日作者：冰夕_lyn原文

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>进度条</title>
 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
 <style type="text/css">
 .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;
 }
 </style> 
</head>
<body>
 <button id = "begin">点击开始</button>
 <div class="container">
 <span class = "progressBar">
 <div id = "progressFill"></div>
 </span>
 <span class = "progressText"> 进度 </span>
 <span id = "percentage">0%</span>
 </div> 
</body>
<script>
 $("#begin").on("click",function(){
 $("#progressFill").animate({ 
 width: "100%"
 }, 10*1000);
 var count = 0;
 var timer = setInterval(function(){
 count++;
 var percentageValue = count + '%'
 $("#percentage").html(percentageValue);
 if(count >= 100) clearInterval(timer);
 },99)
 })
</script>
</html>

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

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