CSS - 实现Loading加载动画

Loading加载动画
用CSS都用实现一个loading的加载动画
通过控制 item-loader-container 来实现显示及隐藏

 <div class="item-loader-container" id="item-loader-container"><div class="la-ball-running-dots la-2x"><div></div><div></div><div></div><div></div><div></div></div></div><style>.item-loader-container{position: absolute;left: 42%;top: 52%;opacity: .7;}.item-loader-container div {-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-o-animation-play-state: paused;animation-play-state: paused;}.la-ball-elastic-dots { width: 120px;height: 10px;font-size: 0;text-align: center;}.la-ball-elastic-dots, .la-ball-elastic-dots>div { position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.la-ball-elastic-dots.la-2x {color: #6f6f70;opacity: .8;font-size: 3px;width: 186px;height: 15px;}.la-ball-elastic-dots.la-2x>div {width: 15px;height: 15px;}.la-ball-elastic-dots>div {display: inline-block;width: 10px;height: 10px;white-space: nowrap;border-radius: 100%;-webkit-animation: ball-elastic-dots-anim 1s infinite;-moz-animation: ball-elastic-dots-anim 1s infinite;-o-animation: ball-elastic-dots-anim 1s infinite;animation: ball-elastic-dots-anim 1s infinite;}.la-ball-elastic-dots>div {display: inline-block;float: none;background-color: currentColor;border: 0 solid currentColor;}@keyframes ball-elastic-dots-anim {0%, 100% {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);margin: 0;}50% {-webkit-transform: scale(0.65);-moz-transform: scale(0.65);-o-transform: scale(0.65);transform: scale(0.65);margin: 0 5%;}</style>

PS：当然也可以使用GIF图，做加载过度例如：

CSS - 实现Loading加载动画相关推荐

css动画----loading加载动画
今天做项目的时候,一个loading加载动画,让我搞了很长时间,后来ui给了看了一个loading加载源码,仿照着源码,把样式改了一下,成功了,并且通过ui给的链接,发现里面有很多优秀的源码可以借鉴, ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
android 载入svg动画,实例讲解使用SVG制作loading加载动画的方法
今天和大家分享一个以SVG图像为主的loading加载动画,现在移动端网页使用比较多,若还用GIF做loading图片的话,可能会影响图像的质量,所以使用SVG是一个不错的方式. 这次展示的代码由 A ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
CSS齿轮转动加载动画
CSS齿轮转动加载动画前言:该动画主要流程分为三块:绘制齿轮,齿轮转动动画,出场动画绘制齿轮绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderO ...
直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
Css3+jquery 实现loading加载动画
一.Css3+jquery 实现loading加载动画这是一个 Loading 加载demo 不需要图片纯html和css 实现样式以下是html css以及js的代码需要自取 <!DO ...

CSS - 实现Loading加载动画

CSS - 实现Loading加载动画相关推荐

最新文章

热门文章