JS实现进度条动态加载特效-创新互联

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

创新互联拥有10多年成都网站建设工作经验,为各大企业提供成都网站设计、做网站服务，对于网页设计、PC网站建设（电脑版网站建设）、app开发定制、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、空间域名等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

<!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>

标题名称：JS实现进度条动态加载特效-创新互联
本文来源：https://www.cdcxhl.com/article26/djpgjg.html

成都网站建设公司_创新互联，为您提供建站公司、云服务器、App开发、搜索引擎优化、电子商务、动态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容