CSS loading 生成工具

CSS loading

在web应用或者网站里,经常会使用到ajax技术去加载数据,并用模板渲染并加入到容器内,在此请求过程中,会有一段请求并等待服务器响应的时间,针对空白时间,可以加入可配置的CSS3 loading动画,优化用户体验。

在web应用或者网站里,经常会使用到ajax技术去加载数据,并用模板渲染并加入到容器内,在此请求过程中,会有一段请求并等待服务器响应的时间,而对于这段时间,其花费的时间对于用户而言是未知,不可见的。如果长时间的页面“无动于衷”,会让用户产生焦虑的心理,并产生关闭网页的冲动,因此针对这个问题,我们大多数时候会放置一样gif动态图片,表示当前数据在加载中。

然而,gif图虽然好用,但是不能像CSS3的那样的灵动,随心所欲。(姑且我们只考虑兼容CSS3的浏览器),但是哪怕要自己写一个CSS3动画,也是相当麻烦的问题,因此我这里推荐一款线上生成CSS loading的工具。

功能调研

在线地址: css3 loading-generate

选择加载类型

选择类型

第一,第二颜色选择 宽高配置

属性配置

颜色指的是CSS效果的颜色,宽高指的是CSS3元素的高度和宽度。

速度选择

速度选择

配置CSS3的运行速度,左边调整:slow,右边调整:fast。

运转方向

方向调整

通过调整radio的选择,可以使得CSS3动画的旋转方向。

背景色调整

背景调整

通过配置background颜色,产生的CSS效果也会拥有不同的颜色的背景。

预览CSS3 效果

预览CSS3 loading效果

这款线上工具最好的地方,我觉得是提供了预览功能,不用我们拷贝代码去刷新查看。

最后大招:生成代码

生成按钮

通过点击这个按钮,获取动态生成的CSS3的代码,是不是很方便呢?

CSS3 代码

通过复制生成的CSS代码,拷贝到你需要的文件中,然后为对应Dom元素增加样式类,即可轻松实现了逼格更高的loading图片了,是不是比gif图的逼格更高呢。

好了,这次的在线工具就介绍到这里,下次有更好的在线工具再和大家分享!