ajax动态加载css_如何创建没有图像CSS3 Ajax加载图标

ajax动态加载css

每当您的Web应用程序与服务器交互时，都会不可避免地出现延迟。 这可能是针对Ajax请求，上传文件或使用更新HTML5 API（例如Web套接字或服务器发送的事件）。

理想情况下，您应该向用户提供一些反馈，以指示他们的操作正在处理中。 您会经常看到带有旋转图案的小型动画GIF。 有几个站点可以为您创建它们，例如preloaders.net和ajaxload.info 。

图像是最好的跨浏览器选项，但存在许多问题：

• GIF不支持Alpha透明度。 将图像放置在彩色背景上时需要小心。
• 位图图像无法很好地缩放。 如果更改尺寸，则需要创建一个新图像。
• 如果不小心，动画图形可能会很大。
• 图片会产生其他HTTP请求。 虽然将缓存图像，但初始下载可能需要比其表示的后台过程更长的时间！ 您可以通过预加载图像或使用嵌入式数据URL来解决此问题，但是这样做会更加省力。

幸运的是，CSS3允许我们创建没有图像的加载图标。 它们易于创建，缩放，重新着色，可在任何背景上使用，并且不会导致图像下载。 您需要：

1. 单个HTML元素，例如
   。
2. 一些CSS背景，边框和阴影效果可创建图形图标。
3. CSS3转换和动画以旋转或移动元素。

查看演示页面…

浏览器兼容性

CSS3转换和动画是需要供应商前缀的实验性属性， 您知道它们会导致什么问题 。 该示例代码实现了final属性以及-webkit（Chrome和Safari），-moz（Firefox），-ms（IE）和-o（Opera）的前缀，但不能保证它们在所有。

在撰写本文时，Chrome，Safari和Firefox的最新版本提供CSS3动画。 IE9 / 8/7/6和Opera显示静态图像，尽管IE10和Opera 12可能支持这些属性。

为了使问题进一步复杂化，Firefox允许您分别为伪元素设置动画。 因此，您可以使用：before和：after添加几个元素，并向不同方向旋转或移动它们以创建更复杂的动画。 虽然最初希望这样做，但在Webkit浏览器中却无法使用。 Chrome和Safari仅允许对真实元素进行动画处理。 它似乎是一个错误或疏忽，但尚未在当前版本或Beta版本中得到修复。

创建图标

我们HTML div可以放在文档中的任何位置，尽管最好将它附加为body的最后一个子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;
}

结果：

可以很容易地调整属性以获得不同的效果，例如，添加border-right: 0 none; 产生：

动画图标

为了使图标旋转和跳动，我们在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替代项。

现在，无论何时启动Ajax请求，都可以使用少量JavaScript显示该图标。 这是一个很棒的效果，可以轻松自定义，并且可以在55％的当前浏览器上使用 。

不幸的是，45％的网络用户看不到动画。 当IE10发布并且用户切换到其他浏览器的最新版本时，该数字将下降，但仍占很大的比例。 您可以使用图像，但如果这样做，则最好将图像用于所有浏览器。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

因此，我建议您查看自己的统计信息。 如果您的访客主要使用Chrome，Safari和Firefox，则可以立即采用该技术。 如果不是，请暂时保留图片，并稍等一会儿以获得更一致的浏览器支持。

翻译自: https://www.sitepoint.com/css3-ajax-loading-icon/

ajax动态加载css