正文
css进度条样式,进度条样式代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用纯CSS编写一个实用的进度条
1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。
2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill
和.bar-fill的span标签。
Plain
3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。
.container {
width:30%;
margin:0 auto
}
.title {
background:#545965;
color:#fff;
padding:15px;
float:left;
position:relative;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px
}
4.首先建一个白色的背景
.bar-unfill {height:15px;display:block;background:#fff;width:100%;border-radius:8px}
5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。
.bar-fill {
height:15px;
display:block;
background:#45c9a5;
width:0;
border-radius:8px;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。
@-webkit-keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
/* Standard syntax */
@keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {
height:15px;
display:block;
background:#e74c3c;
width:0;
border-radius:8px;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
追踪
Tracker
8.最后产生动画效果
.track-wrap {
position:relative;
top:-18px;
-webkit-animation:progressbar2 7s infinite;
animation:progressbar2 7s infinite
}
.track {
height:20px;
display:block;
background:#e74c3c;
width:20px;
border-radius:10px;
position:relative;
left:-12px
}
@-webkit-keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
/* Standard syntax */
@keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
相关问答
Q1: 怎么用css3做一个进度条中间有文字
.bar a{
position: absolute;
left: 50%;
top: 50%;
margin: -9px -24px;
z-index: 21;
}
.rate{
height: 50px;
width: 0;
position: absolute;
background: -webkit-linear-gradient(left, pink , red);
}
div class="bar"
div class="rate"/div
a进度条/a
/div
input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="3" class="set-rate" placeholder="设置进度"
$('.set-rate').bind('input propertychange', function() {
if($('.set-rate').val() = 100 $('.set-rate').val() 0){
$('.rate').width($('.set-rate').val() + '%')
$('.rate1').width(5*parseInt($('.set-rate').val()))
} else if($('.set-rate').val() 100){
$('.rate').width('100%');
$('.set-rate').val(100);
$('.rate1').width(5*parseInt($('.set-rate').val()))
} else {
$('.rate').width(0);
$('.rate1').width(0);
}
});
用JQ
[img]Q2: css中用td实现进度条功能，完成的显示为实线，没有完成的显示为虚线。
border: 1px dotted #000;
1px 是边框大小
dotted是虚线，当然dashed也是但会间隔会大点，看你自己的需要了
#000是颜色
Q3: H5 Css3 怎么实现这样一个进度条
需要用到JS，代码如下（直接复制到你新建的html文件中）：
!DOCTYPE html
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titlejquery实现进度条/title
style type="text/css"
#wrapper{
position: relative;
width:200px;
height:100px;
border:1px solid darkgray;
}
#progressbar{
position: absolute;
top:50%;
left:50%;
margin-left:-90px;
margin-top:-10px;
width:180px;
height:20px;
border:1px solid darkgray;
}
/*在进度条元素上调用动画*/
#fill{
animation: move 2s;
text-align: center;
background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
0%{
width:0;
}
100%{
width:100%;
}
}background: #5EC4EA;
}
/style
/head
body
div id="wrapper"
!--进度条容器--
div id="progressbar"
!--用来模仿进度条推进效果的进度条元素--
div id="fill"/div
/div
/div
/body
/html
script type="text/javascript"
var progressbar={
init:function(){
var fill=document.getElementById('fill');
var count=0;
//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
var timer=setInterval(function(e){
count++;
fill.innerHTML=count+'%';
if(count===100) clearInterval(timer);
},17);
}
};
progressbar.init();
/script
Q4: 谁能提供一个CSS漂亮的进度条样式
有很多其他漂亮的进度条啊，你可以找找的
关于CSS的问题的话推荐去CSS黑板报找找，那里应该会有答案的~
直接百度:CSS黑板报，第一个就是啦~加油！
Q5: css进度条怎么让它竖着
常见的进度条是横着放的，那是设置了其宽度变化，要其竖着，只要将设置其高度变化即可。如：
div style="width:10px; height:100px; border-radius:5px; background-color:#ddd; position:relative;"
div style="width:10px; height:50%; border-radius:5px; background-color:skyblue; position:absolute; left:0; bottom:0;"/div
/div
其效果图如下：
