整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。
今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loading效果吧，文章中的代码可以从github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我们来看看需要实现的效果。
效果图
然后我们一个个来看都是怎么实现的吧。
loadingA的效果就如音乐播放时的动态条一般，不停的连续执行。
其主要实现思路如下：
每个竖状条都是一个简单的div，div为一个小的圆形。
给每个div加上一个动画效果，该动画的效果是高度逐渐变长，最后再变回原样。
每个div延迟不同的时间才开始执行，这样就会有先后的层次感。
然后我们来看看各个部分的代码实现。
基本的div元素
基本的div元素是一个小的圆形。
基本的div元素
定义动画
定义的动画主要是改变div的高度，在完成50%的时候达到最高值，完成100%时恢复到原来高度。
动画效果
设置动画
将定义的动画添加至animation属性，设置一个动画总执行时间，然后给5个div设置不同的延时时间。
设置动画
HTML元素
将以上设置的CSS属性都添加至HTML元素中。
HTML元素
将以上代码写完后，直接在浏览器运行就可以看到如loadingA的效果了。
如果细心的看完loadingA的实现过程，一定可以联想到loadingB的实现。
loadingA是通过给高度加动画，那么loadingB就是通过给宽度加动画，同样给5个div不同的延迟时间。
这里我只给出其动画定义，其他的内容与loadingA类似，详细的内容可以通过github去看。
loadingB动画
loadingC的实现效果如下。
loadingC
在loadingA和loadingB中是通过给高度和宽度增加动画实现的，而loadingC是通过给五个div增加纵向位移实现的。
loadingC实现的关键点就在于translateY的使用，因为动画是从下往上跳动，所以在完成度50%时，translateY设定为负值。
其定义的动画部分代码如下所示。
定义动画
loadingD的实现效果如下。
loadingD效果
通过效果图我们发现有两点差异：
loading过程中透明度会发生变化，这个通过opacity实现。
在接近完成时有个上下轻微抖动的效果，这个通过设置小单位的正负translateY值。
得到的动画代码如下。
loadingD动画
loadingE的动画效果如下。
loadingE
loadingE的效果同loadingD类似，loadingD是通过纵向的位移变换，可以通过translateY实现。
loadingE是通过水平方向位移变换，可以通过translateX来实现。
而有一点不同的是，loadingE的div初始位置就是translateX(-300px)，表示从左侧开始运动。
loadingE动画
loadingF定义的动画如下所示。
loadingF
loadingF是旋转效果，可以很容易想到是通过rotate实现。
loadingF中只有一个div，边框设置为虚线即可，其CSS样式如下。
loadingF基本样式
其定义的动画样式如下。
loadingF定义动画
loadingG与loadingH的动画效果如下。
loadingG&loadingH
loadingG与loadingH类似，loadingH在loadingG的基础上增加了几个点。
loadingG中是通过设置一个纵向的div-1，在该div-1内增加一个div-2，div-2就是转动的圆点，div-2通过绝对定位计算出实际位置，当div-1大小变化时，div-2也应该重新计算位置。
div-2的CSS代码如下所示。
loadingG基本样式
在loadingH中，div-1内有四个div，分别表示转动的四个圆点，也是通过绝对定位计算偏移位置。
最后设置动画，只需要让div-1在一个动画周期内旋转360度即可。
loadingG
loadingI的效果图如下所示。
loadingI
loadingI的动画主要涉及到放大缩小和旋转两个方面，放大缩小通过scale实现，旋转通过rotate实现。具体的可以看看github上的完整代码。
今天这篇文章主要是教大家如何使用CSS3的动画特性去实现loading效果，完全可以不用借助于第三方库，大家也动动手自己实现一下吧。
loading等待效果图对于前端页面或者APP展示来说是非常常见的，目前大多数的效果图都是GIF的格式。鉴于GIF格式的图会比较大，我们完全可以使用CSS去实现一个漂亮的loading效果，今天我们就一起来看看吧。
CSS3
如果有感兴趣的可以去github上看源码，github地址为：
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading-pie/loading-pie.html
首先，我们一起来看下使用CSS3编写的loading效果图，如下所示。
loading效果图
针对上面的loading效果，我们进行仔细的分析，整体loading效果是由内圆和外圆组成。
内部圆实际是由四个半圆组成，2个左半圆，2个右半圆，每侧的两个半圆通过颜色深浅进行区分，当然颜色大家可以随便选取，然后通过定义动画，在不同的时间节点通过z-index属性显示不同的半圆，刚好组成一个完整的旋转效果。
这部分我们来看看页面是如何通过代码实现的。
HTML
首先是页面的HTML代码，正如上面的分析，首先要具有内圆和外圆两个div，然后内圆是通过4个半圆实现，实际内部是4个div，因此我们可以得到以下的HTML部分代码。
页面HTML代码
CSS
其实最核心的部分就是CSS代码，我会慢慢分析如何写出CSS部分的代码。
首先是外圆部分，实际是一个完整的div通过border属性构成3/4的圆，然后通过动画转动这个3/4的圆。因此我们可以直接得出外圆的所有样式如下。
外圆及其动画样式
然后是内圆部分，内圆实际是一个完整的div，通过border-radius属性得到完整的圆，其样式如下。
内圆外圈属性
其次是内部四个半圆的样式，分为左边和右边两个部分，左边和右边每个部分因为颜色上有区别，需要定义不同的动画。其中左边两个半圆的通用属性如下。
左边半圆通用属性
左半边深色圆的动画样式如下。
左半边深色圆动画
左半边浅色圆的动画效果如下。
左半边浅色圆动画
右半边两个半圆通用样式如下。
右半边两个半圆通用样式
右半边深色圆有动画效果，而浅色圆没有动画效果，它们的样式如下。
右半边深浅色半圆样式
至此，所有的CSS样式讲解完毕，如果大家完整运行后就可以得到文章开始的效果。
本篇文章主要讲解了如何使用CSS3动画来制作一个loading效果图，感兴趣的可以直接去github上看源码，希望对你有所帮助~
前做网站开发，大都喜欢用一些小图片小图标，但由于使用小图标会增加Request的次数并增加网页大小。这样的用户体验以及对SEO都不太友好。所以后来推出了字体图标，如font-awesome。
在网站中，特别是使用AJAX技术，Loading图标必不可少，大多数人都是使用一个gif图片来做，这里我介绍使用CSS3动画技术来实现Loading特效，有些人也许会说IE怎么办，我只能说，忘了它吧。先来个效果图：
这里没有动画效果，本来想将CSS动画录制为gif的，但录制效果太差，放弃了，只贴这个图片吧，如果有朋友知道有录制效果好的软件，麻烦告之，不胜感激。需要查看实际效果的朋友，可复制代码运行即可。
html完整代码：
<html>
<head>
<title>css3动画实现超酷loading特效</title>
<style type="text/css">
.loading {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
.spinner-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 300;
height: 100%;
min-width: 100%;
min-height: 100%;
background: rgba(255,255,255,0.93);
}
.spinner {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
animation: 1.5s ease 0s normal none infinite running spin;
border-color: rgba(255, 0, 0, 1) transparent;
border-image: none;
border-radius: 50px;
border-style: solid;
border-width: 20px;
display: block;
height: 1px;
left: 50%;
margin-left: -160px;
position: absolute;
top: 45%;
width: 1px;
}
.spinner-text {
color: #000;
font-family: Arial;
font-size: 20px;
left: 50%;
letter-spacing: 1px;
margin-left: -100px;
margin-top: 2px;
position: absolute;
top: 45%;
}
@keyframes spin {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(720deg) scale(0.6);
}
}
@keyframes spin {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(720deg) scale(0.6);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="spiner-wrapper">
<div class="spinner-wrapper">
<span class="spinner-text">数据加载中，请稍候...</span>
<span class="spinner"></span>
</div>
</div>
</div>
</body>
</html>
上面即为本动画效果所有代码，直接复制代码便可轻松应用到你的网页中。从此告别gif吧，同时跟低版本的IE告别吧。
*请认真填写需求信息，我们会在24小时内与您取得联系。
