html进度条实现原理,HTML5+CSS3从入门到精通 CSS3动画实现各种进度条详解

本篇教程探讨了CSS3动画实现各种进度条，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

1.旋转进度条

.loader-1 {

width: 35px;

height: 35px;

}

/*设置loader-1的宽和高，设置border-radius，使其显示为圆形*/.loader-1 i {

width: 100%;

height: 100%;

border-radius: 50%;

background: linear-gradient(transparent 0%, white, black);

display: block;

animation: load-1 0.6s linear 0s infinite;

}

/*动画效果，一开始旋转0度，50%旋转180度，100%旋转360度*/

@-webkit-keyframes load-1 {

0% {

transform: rotate(0deg);

}

50% {

transform: rotate(180deg);

}

100% {

transform: rotate(360deg);

}

}

2.等待式进度条

主要是每一个竖条先变短再边长的过程

/*loader-2动画*/

.loader-2 i {

display: inline-block;

width: 4px;

height: 35px;

border-radius: 2px;

margin: 0 2px;

background-color: #333;

}

@-webkit-keyframes load-2 {

0% {

transform: scaleY(1);

}

50% {

transform: scaleY(0.4);

}

100% {

transform: scaleY(1);

}

}

/*设置每一个i的动画效果，执行延时时间不同，就能有波浪的效果*/.loader-2 i:nth-child(1) {

animation: load-2 1s ease-in 0.1s infinite;

}

.loader-2 i:nth-child(2) {

animation: load-2 1s ease-in 0.2s infinite;

}

.loader-2 i:nth-child(3) {

animation: load-2 1s ease-in 0.3s infinite;

}

.loader-2 i:nth-child(4) {

animation: load-2 1s ease-in 0.4s infinite;

}

.loader-2 i:nth-child(5) {

animation: load-2 1s ease-in 0.5s infinite;

}

1.

主要利用圆点的先变小再变大的过程，以及颜色从黑变灰的过程,使用透明度opacity实现。

/*loader-3动画*/.loader-3 {

position: relative;

}

@-webkit-keyframes load-3 {

50% {

transform: scale(0.4);

opacity: 0.4;

}

100% {

transform: scale(1);

opacity: 0.4;

}

}

.loader-3 i {

display: block;

width: 15px;

height: 15px;

border-radius: 50%;

position: absolute;

background-color: black;

}

.loader-3 i:nth-child(1) {

top: 25px;

left: 0;

animation: load-3 1s ease 0s infinite;

}

.loader-3 i:nth-child(2) {

top: 17px;

left: 17px;

animation: load-3 1s ease -0.12s infinite;

}

.loader-3 i:nth-child(3) {

top: 0px;

left: 25px;

animation: load-3 1s ease -0.24s infinite;

}

.loader-3 i:nth-child(4) {

top: -17px;

left: 17px;

animation: load-3 1s ease -0.36s infinite;

}

.loader-3 i:nth-child(5) {

top: -25px;

left: 0;

animation: load-3 1s ease -0.48s infinite;

}

.loader-3 i:nth-child(6) {

top: -17px;

left: -17px;

animation: load-3 1s ease -0.6s infinite;

}

.loader-3 i:nth-child(7) {

top: 0px;

left: -25px;

animation: load-3 1s ease -0.72s infinite;

}

.loader-3 i:nth-child(8) {

top: 17px;

left: -17px;

animation: load-3 1s ease -0.84s infinite;

}

4.进度条的实现

*loader4,进度条,底部的进度框，通过box-shadow设置内外部阴影*/

.loader-4 {

width: 80%;

background-color: #dcdbd7;

border-radius: 15px;

position: relative;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

/*不断增长的内部进度条，宽度使用动画从0增长到100*/

.progress span {

display: block;

background: linear-gradient(#e0f6c8, #98ad84);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);

height: 15px;

border-radius: 10px;

animation: progress1 10s linear 0s infinite;

}

/*上面百分比的气泡，开启了绝对定位，相对于loader4进行定位

然后开启了动画，通过设置left来改变位置，保持移动。

*/#percent {

position: absolute;

width: 22px;

height: 10px;

padding: 5px 10px;

border-radius: 0.4em;

font-size: 12px;

font-weight: bold;

left: -22px;

top: -35px;

background: #eeeff3;

background: linear-gradient(#eeeff3, #cbcbd3);

animation: counter 10s linear 0s infinite;

}

/*

是底下的小三角行的实现，实际是一个方形，然后旋转了45度，

开启了绝对定位，是相对于#percent一直50%

*/#percent:after {

content: "";

position: absolute;

width: 8px;

height: 8px;

background: #cbcbd3;

transform: rotate(45deg);

left: 50%;

margin-left: -4px;

bottom: -4px;

border-radius: 0 0 3px 0;

}

@-webkit-keyframes progress1 {

from {

width: 0px;

}

to {

width: 100%;

}

}

@keyframes counter {

from {

left: -22px;

}

to {

left: 85%;

}

}

5.圆环进度条的实现

整个圆环是在100*100的方形框中，

将方形框的左半边设置一个矩形框，里面放了一个圆环，左半边的矩形框设置overflow:hidden。

将方形框的右半边设置一个矩形框，里面放了一个圆环，右半边的矩形框也设置overflow:hidden.

左半边的圆设置左边和底下是透明的，右半边的圆设置右边和上边是透明的。

然后开始旋转，先是右边转，在0%-50%的时候从45度转到225度。

然后左边转，在50%-100%时从45度转到225度。

/*圆环进度条*/.loader-5 {

width: 100px;

height: 100px;

position: relative;

}

/*左半边的一个矩形框*/.leftRect{

height: 100px;

width: 50px;

position: absolute;

top:0;

left:0;

overflow: hidden;

}

/*右半边的矩形框*/.rightRect{

height: 100px;

width: 50px;

position: absolute;

top:0;

right: 0;

overflow: hidden;

}

/*左半边的圆,只有下面和左边的border是有颜色的，其他的是透明的*/.leftcircle{

box-sizing: border-box;

width: 100px;

height: 100px;

border:20px solid black;

border-radius: 50%;

border-bottom:20px solid transparent;

border-left:20px solid transparent;

left:0;

position: absolute;

box-shadow: 2px 2px #333333 inset, 2px 2px #333333;

-webkit-animation: circleProgressLoad_left 5s linear infinite;

}

/*右半边的圆，只有右边和上边的border是有颜色的，其他的是透明的*/.rightcircle{

box-sizing: border-box;

right:0;

width: 100px;

height: 100px;

border:20px solid black;

border-radius: 50%;

position: absolute;

border-top:20px solid transparent;

border-right:20px solid transparent;

-webkit-animation: circleProgressLoad_right 5s linear infinite;

box-shadow: 2px 0 #333333 inset, 2px 0 #333333;

}

@-webkit-keyframes circleProgressLoad_right {

0% {

-webkit-transform: rotate(45deg);

}

50% {

-webkit-transform: rotate(225deg);

}

100% {

-webkit-transform: rotate(225deg);

}

}

@-webkit-keyframes circleProgressLoad_left {

0% {

-webkit-transform: rotate(45deg);

}

50% {

-webkit-transform: rotate(45deg);

}

100% {

-webkit-transform: rotate(225deg);

}

}

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！