如何创建一个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你可以采用今天的技术。如果不是,坚持图像现在和少许等待更一致的浏览器支持。

源文地址转载请注明：http://www.software8.co/wzjs/cssdiv/471.html

转载于:https://www.cnblogs.com/software8/archive/2012/09/16/2687231.html