欢迎访问优讯网!
您当前的位置:首页 > 爱编程

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

时间:2020-03-26 10:00:29  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要为大家详细介绍了JS实现进度条动态加载特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/183508.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门