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_06_理解对象的创建过程
Oct 15 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
Vue使用axios出现options请求方法
May 30 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
简单的js分页脚本
2009/05/21 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JS高级笔记
2011/07/13 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
javascript动态加载二
2012/08/22 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Python异常学习笔记
2015/02/03 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python单元测试与测试用例简析
2019/11/09 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
进修护士自我鉴定
2013/10/14 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
教师思想工作总结2015
2015/05/13 职场文书
地道战观后感2000字
2015/06/04 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书