12个创新的纯CSS3进度条特效 动画效果很漂亮

进度条是很常用的一个用户体验项，用于表示事件的处理或加载状态，制作这些loading进度条我们通常会使用GIF图片来实现，但是这方法也有一些弊端，比如我要放大或改变颜色，这样就不好处理了。 要解决这些问题最好就是用代码来实现了，现在CSS3已经流行起来，我们是否也尝试一下用CSS来实现呢?方法是有的，而且很简单，看看今天设计达人网为大家分享的12个使用纯CSS3编写的进度条，loading图标和动画都很棒哦

工具/原料

css

方法/步骤

1如下图：

2这里我特别制作成GIF图片方便大家浏览，这些loading的icon 图标动画各有特色，有充电状态、眼睛转动、时钟转动动画、加精的点点点等等，都是很有创意的设计哦!

3是不是很好看而又创新呢?那么我们如何使用这些loading进条度应用在优秀网页设计上呢?下面我以左上角的'时钟为例子，代码如下： 进度条CSS代码：

4/*Timer*/r{width:24px;height:24px;box-shadow:inset0px0px0px2px#fff;border-radius:50%;position:relative;margin:38pxauto;/*Notnecessary-itsonlyforlayouting*/}r:after,r:before{position:absolute;content:"";}r:after{width:10px;height:2px;top:11px;left:11px;-webkit-transform-origin:1px1px;-moz-transform-origin:1px1px;transform-origin:1px1px;-webkit-animation:minhand2slinearinfinite;-moz-animation:minhand2slinearinfinite;animation:minhand2slinearinfinite;}r:before{width:8px;height:2px;top:11px;left:11px;-webkit-transform-origin:1px1px;-moz-transform-origin:1px1px;transform-origin:1px1px;-webkit-animation:hrhand8slinearinfinite;-moz-animation:hrhand8slinearinfinite;animation:hrhand8slinearinfinite;}@-webkit-keyframesminhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframesminhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframesminhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframeshrhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframeshrhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframeshrhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

5HTML代码：

6怎么样?是不是很简单呢?日后使用这些CSS编写的loading进度条就非常方便的改大小和颜色啦!