css3静态进度条,css3实现进度条

HTML 结构很简单，但不是 Single Element：

外层元素 .spinner 负责显示底部的半透明圆环：

.spinner {

font-size: 20px;

width: 1em;

height: 1em;

border-radius: 50%;

box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);

}

.spinner 里的 i 元素被裁剪(clip)了一半，并做 0° 至 180° 的顺时钟旋转：

.spinner i {

position: absolute;

clip: rect(0, 1em, 1em, .5em);

width: 1em;

height: 1em;

animation: spinner-circle-clipper 1s ease-in-out infinite;

}

@keyframes spinner-circle-clipper {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(180deg);

}

}

i 的 :after 伪元素同样被裁减了一半，并做 -180° 至 180° 的顺时钟旋转：

.spinner i:after {

position: absolute;

clip: rect(0, 1em, 1em, .5em);

width: 1em;

height: 1em;

content: '';

animation: spinner-circle 1s ease-in-out infinite;

border-radius: 50%;

box-shadow: inset 0 0 0 .1em #3aa8ed;

}

@keyframes spinner-circle {

0% {

transform: rotate(-180deg);

}

100% {

transform: rotate(180deg);

}

}

通过 2 个元素不断旋转导致的角度差，配合裁剪就能实现平滑的圆环长度变化效果。

CSS3动画进度条

CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

纯CSS3制作进度条源代码

在里面插入条纹进度条,以及进度显示文本进度: