js 实现加载百分比效果
效果：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载效果</title>
</head>
<style>
.loading {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 999;
font-size: 20px;
background-color: #fff;
} .loading.active {
-webkit-animation: fadeAnim 0.3s forwards ease-in-out;
animation: fadeAnim 0.3s forwards ease-in-out;
} .load {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
top: 40%;
left: 50%;
margin-left: -20px;
} .load-text {
color: #099607;
font-size: 40px;
margin-top: 108px;
display: inline-block;
} .load-cell1,
.load-cell2 {
width: 100%;
height: 100%;
border-radius: 100px;
-webkit-border-radius: 100px;
border: 3px solid #fff;
background-color: #099607;
top: 0;
left: 0;
opacity: 0.6;
position: absolute;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
} .load-cell2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
} @-webkit-keyframes fadeAnim {
from {
opacity: 1
} to {
opacity: 0
}
} @keyframes fadeAnim {
from {
opacity: 1
} to {
opacity: 0
}
} @-webkit-keyframes bounce { 0%,
100% {
-webkit-transform: scale(0.0)
} 50% {
-webkit-transform: scale(1.0)
}
} @keyframes bounce { 0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
<div class="loading" id="Js_load">
<div class="load">
<div class="load-cell1"></div>
<div class="load-cell2"></div>
<span class="load-text j_loadtext"></span>
</div>
</div>
<script type="text/javascript">
(function(window, undefined) {
//loading
var loader = document.getElementById("Js_load"),
bar = loader.querySelector(".j_loadtext"),
num = 0,
time = 0,
state = true;
//加载完成
function loadOk() {
if (state) {
state = false;
bar.innerHTML = "100%";
loader.className = "loading active";//加到100%后，关闭加载效果
setTimeout(function() {
loader.style.display = "none";
}, 500);
}
}
var timer = setInterval(function() {
num = parseInt(num + Math.random() * 10, 10); time++;
if (num > 90) {
num = 90;
} else {
bar.innerHTML = num + "%";
}
if (time > 10) {
clearInterval(timer);
loadOk();
}
}, 1000); window.onload = function() { //页面加载完成后，关闭加载效果
loadOk();
}; })(window);
</script>
</body>
</html>
js 实现加载百分比效果的更多相关文章
- js图片加载效果（延迟加载+瀑布流加载）
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法
今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- Ladda – 把加载提示效果集成到按钮中，提升用户体验
Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...
- js动态加载脚本
最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...
- 转:web前端面试题合集 (Javascript相关)（js异步加载详解）
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- js并行加载，顺序执行
js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...
随机推荐
- NX二次开发-UFUN输入特征TAG,获取特征所有表达式TAG和个数UF_MODL_ask_exps_of_feature
NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建块 UF_FEATURE_SIGN S ...
- Java设计模式简单总结
1.单例模式:在应用程序整个生命周期中,单例类的实例只有一个,并且会自动实例化.单例类的构造方法必须为私有,并且提供一个全局访问点 public class Test { private Test() ...
- bootstrap中container和container-fluid的区别
container和container-fluid 在bootstrap中,两者都是设置文本居中,但是它们还是有很大差别的 container 是随屏幕宽度的变化而变化的,是阶段性变化,有一个随浏览器 ...
- 两个问题： 1、头文件重复包含 2、头文件加了ifndef条件预处理指令为什么还会定义
第一个问题:编译时重定义 文件1.h void fun1(); struct A { int a char b; }; 文件2.h #include"1.h" struct B ...
- 2015年7个重要的Web设计趋势
Web设计趋势每一年都会有所变化.但设计师的创意天赋是推动改变网页设计标准的法则.如果在2015年,网页缺少以下7个设计元素,必定被淘汰~ 1.排版更灵活 这部分的主要焦点在于,字体展现会受到新兴排版 ...
- 协方差及matlib绘制
转自http://www.cnblogs.com/chaosimple/p/3182157.html 一.统计学的基本概念 统计学里最基本的概念就是样本的均值.方差.标准差.首先,我们给定一个含有n个 ...
- [课后作业] 第001讲：我和Python的第一次亲密接触 | 课后测试题的答案
0. Python 是什么类型的语言? Python是脚本语言 脚本语言(Scripting language)是电脑编程语言,因此也能让开发者藉以编写出让电脑听命行事的程序.以简单的方式快速完成某些 ...
- neo4j数据库迁移---------Neo4j数据库导入导出的方法
Neo4j数据进行备份.还原.迁移的操作时,首先要关闭neo4j; /usr/share/neo4j/bin neo4j stop 如果出现 Neo4j not running 出现这种情况, Neo ...
- ELK日志分析系统（原创）
一.简介 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引 ...
- IRP FLAGS
IRP所有标识位的含义,是 _IRP . flags 这个成员 IRP_NOCACHE 0x00000001 //表示I/O请求从存储的媒介而不是高速缓存中读取数据 IRP_PAGING_IO 0x0 ...