原生JS+ CSS3创建loading加载动画;
效果图:
js创建loading
show = function(){
//loading dom元素
var Div = document.createElement("div");
Div.setAttribute("class","ui-loading");
var chidDiv = document.createElement("div");
chidDiv.setAttribute("class","ui-loading-mask")
Div.appendChild(chidDiv)
document.body.appendChild(Div)
}
取消loading加载
hide= function(){
var Div = document.getElementsByClassName("ui-loading");
while(Div[0].hasChildNodes()) //当div下还存在子节点时 循环继续
{
Div[0].removeChild(Div[0].firstChild);
}
var par = Div[0].parentNode;
par.removeChild(Div[0])
}
定义加载动画css样式
/*
* loading加载动画样式
*/
.ui-loading{
position: fixed;
top:;
right:;
bottom:;
left:;
z-index:;
background-color: rgba(0,0,0,.4);
}
.ui-loading-mask{
width: 6px;
height: 6px;
border-radius: 50%;
-webkit-animation: typing 1s linear infinite alternate;
-moz-animation: Typing 1s linear infinite alternate;
animation: typing 1s linear infinite alternate;
margin: 80% auto 0; /* Not necessary- its only for layouting*/
position: relative;
left: -12px;
}
@-webkit-keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
} @-moz-keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
} @keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.6);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
100%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
}
原生JS+ CSS3创建loading加载动画;的更多相关文章
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- 源码分享-纯CSS3实现齿轮加载动画
纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html
- CSS动画实例:Loading加载动画效果(一)
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
随机推荐
- TCP/IP协议11种状态
1.l SYN_SENT :这个状态与SYN_RCVD 状态相呼应,当客户端SOCKET执行connect()进行连接时,它首先发送SYN报文,然后随即进入到SYN_SENT 状态,并等待服务端的发 ...
- Python操作Jira
目录 认证 项目(Project) 问题(Issue) 配置域(Fields) 关注者/评论/附件 创建/分配/转换问题 搜索 Jira提供了完善的RESTful API,如果不想直接请求API接口可 ...
- GO- 使用JSON
1 json.Marshal 把对象转换为JSON的方法 原型如下 func Marshal(v interface{}) ([]byte, error)这个函数接收任意类型的数据 v,并转换为字节 ...
- 一起来学习React-Native之react-navigation基本解析
前言 不久前自己也完整开发了一个React-Native项目,对其中的一些知识存在疑惑,再加上项目时间比较紧张,来不及做系统的学习.现在来回顾自己开发当中存在的疑惑点,和大家分享.第一篇是关于路由 ...
- html5、手机端 input 单独打开相机、摄像头、录音功能
相机:<input type="file" name="image" accept="image/*" capture="u ...
- Linux中强大的top命令
top命令算是最直观.好用的查看服务器负载的命令了.它实时动态刷新显示服务器状态信息,且可以通过交互式命令自定义显示内容,非常强大. 在终端中输入top,回车后会显示如下内容: top - 21: ...
- 唯品会HDFS性能挑战和优化实践
唯品会HDFS性能挑战和优化实践 原创: 大数据平台 唯技术 4月1日 https://mp.weixin.qq.com/s/LMa99ubgACI4eaDV3G-6gw
- Googletest - Google Testing and Mocking Framework
Googletest - Google Testing and Mocking Framework https://github.com/google/googletest
- 导入GoogleClusterData到MySQL
本篇随笔记录如何导入google-cluster-data-2011-1-2的 job_events和task_events到MySQL 1. 下载数据 download_job_events: im ...
- MySQL数据库表的设计和优化(上)
一.单表设计与优化: (1)设计规范化表,消除数据冗余(以使用正确字段类型最明显):数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表 ...