标签归档:CSS3进度条

CSS3实现的火柴燃烧Loading加载动画

这次我们要给大家分享一款非常特别的CSS3 Loading加载动画,整个Loading加载动画就好像是火柴在燃烧一样,不足的是火苗并没有那么真实,比较抽象,不过这款Loading动画还是比较富有创意,非常适合在一些个性化的页面上使用。

css3-matches-loading

在线演示源码下载

超富创意的CSS3飞机跑道进度条动画

前几天我们分享过一款很漂亮的CSS3彩色进度条加载动画 带进度百分比,相当实用。今天我们继续要为大家介绍一款非常具有创意的CSS3飞机跑道进度条动画,它的进度动画就像飞机在跑道上奔跑一样,整个进度条样式也酷似飞机跑道,当然这只是外观的不同,进度条还是那个进度条,实用性依然存在。

css3-aircraft-progressbar

在线演示源码下载

CSS3彩色进度条加载动画 带进度百分比

前面我们刚分享过一些超炫酷的CSS3 Loading加载动画,这些Loading动画可以在很多地方帮助我们提示用户等待。这次要分享的也是加载动画,不过是进度条加载动画,这款进度条应用的特点是进度条呈现彩色的外观,而且进度条上方显示当前进度的百分比,非常实用。

css3-colorful-progressbar

在线演示源码下载

CSS3发光进度条动画 超炫酷的样式

这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果。页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改变进度条的值,使用起来比较方便。另外以前介绍过一款CSS3 3D进度条,其风格也类似。

css3-shine-progressbar

在线演示源码下载

超炫酷的CSS3进度条动画 背景色渐变

这次要给大家分享的是一款效果很酷的CSS3进度条动画应用,之前也有介绍过不少jQuery/CSS3/HTML5的进度条插件,比如HTML5 Canvas彩色像素进度条动画jQuery动画进度条 实时显示进度百分比等。今天介绍的这款CSS3进度条的背景色是渐变的,非常具有立体的视觉效果,并且进度在滚动时可以实时显示当前进度百分比。

css3-progress-bar-linear-color

在线演示源码下载

HTML5 Canvas彩色像素进度条动画

之前我们分享过很多不错的CSS3进度条,效果相当不错。今天我们来推荐一款基于HTML5 Canvas的彩色像素进度条动画,它有两个特点,其一是进度条颜色会随着进度的改变而改变,其二是进度条更新时,会产生像素掉落的动画特效,很有创意。

html5-canvas-loader

在线演示源码下载

CSS3彩色进度条 按百分比显示不同颜色

这是一款很不错的CSS3进度条应用,这款CSS3进度条和普通的不一样,它可以根据不同的百分比来显示当前进度的颜色,很像游戏中人物生命值一样,随着进度增加,进度条的颜色就会发生变化。更多CSS3进度条,可以移步至CSS3进度条栏目。

css3-progress-bar-with-color

在线演示源码下载

CSS3垂直进度条动画 数字百分比显示

这次我们要来分享一款CSS3进度条动画,这款进度条是垂直放置的,在进度加载的时候,进度条的背景会出现一个快速移动的箭头动画,并且随着进度条的移动,数字百分比也将随着进度实时更新,直至进度完成,完成后进度条颜色由红色编程绿色。

css3-ver-progressbar-number

在线演示源码下载

CSS3 3D环形进度条 带进度百分比

这是一款基于纯CSS3的环形进度条,而且,从外观上看,这款进度条很有3D立体的感觉,尤其是在进度条上有立体的投影,显得非常小巧迷人。另外,进度条的环形中央带有进度百分比,可以实时根据进度来更新百分比的数值,和之前分享的HTML5/CSS3扇形进度条动画相比有一定优势。

在线演示源码下载

HTML5/CSS3扇形进度条动画 可渐变颜色

今天我们要来分享一款很特别的CSS3进度条动画,它是一个半个圆的扇形,同时,随着进度的增加,进度条的背景颜色会逐渐变化,最后完成的时候变成绿色,效果非常不错。另外,我们再推荐之前分享过的一款进度条:漂亮的CSS3动画进度条 可自定义进度条颜色

html5-half-circle-progress

在线演示源码下载