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

HTML & CSS 5年前 (2014-01-13) 3,402 人围观 0

进度条是很常用的一个用户体验项,用于表示事件的处理或加载状态,制作这些loading进度条我们通常会使用GIF图片来实现,但是这方法也有一些弊端,比如我要放大或改变颜色,这样就不好处理了。

要解决这些问题最好就是用代码来实现了,现在CSS3已经流行起来,我们是否也尝试一下用CSS来实现呢?方法是有的,而且很简单,看看今天为大家分享的12个使用纯CSS3编写的进度条,loading图标和动画都很棒哦!如下图:

css-loadding

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

进度条

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

进度条CSS代码:

/* Timer*/.timer{width: 24px;height: 24px;background-color: transparent;box-shadow: inset 0px 0px 0px 2px #fff;border-radius: 50%;position: relative;margin: 38px auto;/* Not necessary- its only for layouting*/}.timer:after, .timer:before{position: absolute;content:"";background-color: #fff;}.timer:after{width: 10px;height: 2px;top: 11px;left: 11px;-webkit-transform-origin: 1px 1px;-moz-transform-origin: 1px 1px;transform-origin: 1px 1px;-webkit-animation: minhand 2s linear infinite;-moz-animation: minhand 2s linear infinite;animation: minhand 2s linear infinite;}.timer:before{width: 8px;height: 2px;top: 11px;left: 11px;-webkit-transform-origin: 1px 1px;-moz-transform-origin: 1px 1px;transform-origin: 1px 1px;-webkit-animation: hrhand 8s linear infinite;-moz-animation: hrhand 8s linear infinite;animation: hrhand 8s linear infinite;}@-webkit-keyframes minhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes minhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframes minhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes hrhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes hrhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframes hrhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

HTML代码:

<div></div>

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