如何创建一个CSS3 Ajax加载图标没有图像

每当您的web应用程序与服务器进行交互时有一个不可避免的延迟。这可能是一个Ajax请求,上传一个文件,或者使用新的HTML5 web sockets api(比如或服务器发送事件。
 
理想情况下,你应该给用户一些反馈以表明他们的行动是被处理。你会经常看到小gif动画与旋转模式。
 
图像是最好的跨浏览器的选择,但他们有许多问题:
 
    gif不支持alpha透明度。您需要谨慎将图像在一个彩色背景。
    位图图像不会规模好。如果你改变的维度,您需要创建一个新形象。
    如果你不小心,动画图形可以有一个大文件的大小。
    图像招致额外的HTTP请求。虽然图像将被缓存,初始下载时间可能超过它所代表的后台进程!你可以通过预加载代码围绕这个问题的图像或使用嵌入式数据的url,但它更努力。
 
幸运的是,CSS3允许我们创建加载图标没有图像。他们很容易创建、规模、再保证颜色,使用于任何背景和不产生图像下载。你需要:
 
    一个HTML元素,例如。 <div id="ajaxloader"></div>.
    一些CSS背景、边界和阴影效果,创造了一个图形图标。
    CSS3转换和动画旋转或移动元素。
 
CSS3转换和动画是实验性质要求供应商前缀-而且你知道他们造成麻烦。示例代码实现最后的财产以及前缀为webkit(Chrome和Safari),-moz(Firefox),- ms(IE),和- o(Opera),但谁也不能保证他们会始终工作。
 
在撰写本文时,最新版本的Chrome、Safari和Firefox提供CSS3动画。IE9/8/7/6显示一个静态图像,虽然IE10和oper12可能支持的属性。
 
只是让事情更加复杂的是,Firefox允许你激活伪元素分别。因此,您可以添加两个元素使用:之前和之后和旋转或移动它们在不同的方向来创建更复杂的动画。虽然我最初希望这样做,它不工作在webkit浏览器。Chrome和Safari只允许真正的元素动画。这似乎是一个bug或监督,但它不是被固定在当前或beta版本。
创建图标
 
我们的HTML div可以放置在文档的任何地方虽然最好将它作为最后的孩子吗 body。然后,它将出现高于其他元素,可以定位在关系到页面。
 
图标CSS简单地设置宽的白色圆形边界。正确的边框颜色然后设为透明和一个小阴影是应用:
 
 
#ajaxloader
{
position: absolute;
width: 30px;
height: 30px;
border: 8px solid #fff;
border-right-color: transparent;
border-radius: 50%;
box-shadow: 0 0 25px 2px #eee;
}
 
结果:
 
CSS Ajax图标1
 
很容易调整的属性不同的效果,如添加 border-right: 0 none;生产:
 
CSS Ajax图标2
动画图标
 
使图标自旋和脉动,我们应用旋转转换和透明度的变化在一个CSS3动画。动画的名字、持续时间、宽松类型和重复应用于元素:
 
 
#ajaxloader
{
animation: spin 1s linear infinite;
}
 
紧随其后的是动画帧:
 
 
@keyframes spin
{
from { transform: rotate(0deg);   opacity: 0.2; }
50%  { transform: rotate(180deg); opacity: 1.0; }
to   { transform: rotate(360deg); opacity: 0.2; }
}
 
所有的浏览器都支持动画没有前缀,这样你会看到webkit,-moz,- ms和- o替代品在源代码中当你查看演示页面.
 
显示的图标现在可以使用一些JavaScript每当一个Ajax请求启动。这是一个很好的效果,可以定制轻松和作品55%的当前浏览器.
 
不幸的是,45%的网络用户不会看到动画。这个数字将下降当IE10释放和用户切换到其他浏览器的最新版本,但它仍然是一个很大的百分比。你可以回到一个图像,但是如果你这样做,你不妨使用图像适合所有浏览器。
 
因此,我建议你看看你自己的统计数据。如果你的访客是主要是使用Chrome、Safari和Firefox你可以采用今天的技术。如果不是,坚持图像现在和少许等待更一致的浏览器支持。

补充：web前端 , HTML/CSS  ,