本文作者html5tricks,转载请注明出处
进度条在网页中的使用非常广泛,特别是现在基于jQuery和CSS3技术实现的进度条插件,外观上都非常完美,很多甚至都相当炫酷。这次我们来总结一些个人认为几近完美的CSS3进度条插件,这些都是以前我们分享过的,希望通过这次总结可以让更多的人了解和使用这些超有用的CSS3进度条。
1、jQuery五彩火焰背景的3D进度条插件
基于jQuery和CSS3的进度条插件五花八门,非常繁多,我们之前也介绍过一些,像超富创意的CSS3飞机跑道进度条动画在外观上就非常有创意,像CSS3发光进度条动还可以自定义控制进度条的百分比。今天我们再要介绍另外一款基于jQuery的五彩火焰背景3D进度条插件,它的背景就像燃烧的火焰一样,而且也有多种颜色选择,进度条整体看上去有3D立体的视觉效果。
2、CSS3发光进度条动画 超炫酷的样式
这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果。页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改变进度条的值,使用起来比较方便。另外以前介绍过一款CSS3 3D进度条,其风格也类似。
3、CSS3彩色进度条加载动画 带进度百分比
这次要分享的也是加载动画,不过是进度条加载动画,这款进度条应用的特点是进度条呈现彩色的外观,而且进度条上方显示当前进度的百分比,非常实用。
4、又来一波 15个超炫酷的CSS3加载Loading动画图标
今天我们又要向大家分享一组炫酷的CSS3加载Loading动画图标,它们共同的特点就是都很个性化。
5、CSS3超炫酷圆形计时器进度条动画
今天要给大家分享一款非常炫酷的CSS3圆形计时器,这款圆形计时器也可以用来做进度条,非常实用。该计时器由2个圆环组成,分别代表秒和分,随着时间的推移,这两个圆环将逐渐被色彩填充满,并且每一秒的过程中都会有另外一个圆环进行颜色填充。
6、近20款样式的HTML5环形进度条插件
今天要分享的也是一款基于HTML5的环形进度条插件,一共有近20款样式,非常实用。
7、超富创意的CSS3飞机跑道进度条动画
前几天我们分享过一款很漂亮的CSS3彩色进度条加载动画 带进度百分比,相当实用。今天我们继续要为大家介绍一款非常具有创意的CSS3飞机跑道进度条动画,它的进度动画就像飞机在跑道上奔跑一样,整个进度条样式也酷似飞机跑道,当然这只是外观的不同,进度条还是那个进度条,实用性依然存在。
8、超漂亮的jQuery和Bootstrap进度条插件
这又是一款非常漂亮的网页进度条插件,它是基于jQuery脚本和Bootstrap样式的,形式和之前分享的CSS3彩色进度条加载动画 带进度百分比类似,但是外观有所不同。同样的这款进度条也有数字百分比显示在上方,因此可以很清楚地了解当前进度情况。
9、CSS3 3D环形百分比进度条图表
这是一款基于JavaScript和CSS3的3D环形百分比进度条图表,它可以展示当前数据的百分比情况,与之前分享过的一款HTML5 SVG环形图表应用相比,这款环形图表应用的特点是它的外观呈现3D立体的视觉效果,而且实用性也是不错的。
10、jQuery/CSS3彩色进度条插件 动态百分比提示
今天要为大家分享一款非常实用的jQuery/CSS3彩色进度条插件,进度条的UI风格比较漂亮,进度实体部分有发光的动画特效。另外还有一个特点是,进度百分比会动态提示,让用户实时了解当前事件的进度情况,并且在结束时提示进度完成情况。
11、HTML5 Canvas 圆形进度条 显示数字百分比
记得以前为大家分享过很多样式各异的进度条插件,有基于jQuery的,也有基于HTML5和CSS3的。这次我们要介绍另外一款基于HTML5 Canvas的圆形进度条应用,在黑色的背景下,白色的进度条显得格外显眼,而且圆形中央会实时显示当前进度的数字百分比,非常实用。
以上就是11款几近完美的CSS3进度条插件,欢迎收藏分享。
转载请注明原文链接:https://www.html5tricks.com/11-perfect-css3-progressbar.html