整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前做网站开发，大都喜欢用一些小图片小图标，但由于使用小图标会增加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告别吧。
击上方 "程序员小乐"关注, 星标或置顶一起成长
loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图，可供参考！
就这样一个小小的库也收获了9.5k的stars，以下是其仓库源地址
https://github.com/ConnorAtherton/loaders.css
自由选择安装方式进行安装使用
bower install loaders.cssnpm i --save loaders.css1、标准用法
jQuery（可选）
将样式添加到正确的子div元素
.ball-grid-pulse > div {
background-color: orange;
}使用2D比例转换
.loader-small .loader-inner {
transform: scale(0.5, 0.5);
}Loaders.css衍生了很多适用于其它平台或框架的优秀库，这些都是受Loaders.css的启发而产生的
https://github.com/jonjaques/react-loaders
https://github.com/Hokid/vue-loaders
https://github.com/Masadow
https://github.com/kaermorchen/ember-cli-loaders
https://github.com/gontovnik/DGActivityIndicatorView
https://github.com/varunsridharan/Loaders.CSS-Android-App
Loaders.css是一个非常出色的loading动画库，可以将它运用到你任何新的或者现有的项目中，性能出众，定制化，enjoy it！
*请认真填写需求信息，我们会在24小时内与您取得联系。
