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


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了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>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 内存回收机制理解
Jan 17 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 #Javascript
javascript+css实现进度条效果
Mar 25 #Javascript
JS实现可控制的进度条
Mar 25 #Javascript
js实现简单进度条效果
Mar 25 #Javascript
JavaScript实现简单进度条效果
Mar 25 #Javascript
JavaScript实现随机点名程序
Mar 25 #Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
PHP中实现进程间通讯
2006/10/09 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Python中的闭包总结
2014/09/18 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
业务部经理岗位职责
2014/01/04 职场文书
写给女生的道歉信
2014/01/08 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
任命书模板
2014/06/04 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
华山导游词
2015/02/03 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
网络舆情信息简报
2015/07/21 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫