如何使用 css3 创建进度条

Question

我是开发人员而不是设计师，所以请对我轻松。我正在尝试创建进度条列表，但动画对此不起作用.当页面到达元素位置时，我想将进度条缓慢运行到定义的宽度。 这是我的 HTML 页面内容

<div class="container">
<div class="row">
<!-- Skill Bars -->
<div class="progress-straight skill-bar ">
<div class="progress-bar-straight progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<span class="skill">HTML <i class="val">100%</i></span>
</div>
</div>
<div class="progress-straight skill-bar">
<div class="progress-bar-straight progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" >
<span class="skill">CSS<i class="val">90%</i></span>
</div>
</div>
<div class="progress-straight skill-bar">
<div class="progress-bar-straight progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<span class="skill">JavaScript<i class="val">75%</i></span>
</div>
</div>  
<div class="progress-straight skill-bar">
<div class="progress-bar-straight progress-bar-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
<span class="skill">Photoshop<i class="val">55%</i></span>
</div>
</div>  
</div>
</div>

而CSS是

.progress-straight {
height: 35px;
}
.progress-straight .skill {
font: normal 12px "Open Sans Web";
line-height: 35px;
padding: 0;
margin: 0 0 0 20px;
text-transform: uppercase;
}
.progress-straight .skill .val {
float: right;
font-style: normal;
margin: 0 20px 0 0;
}
.progress-bar-straight {
text-align: left;
transition-duration: 3s;
transition: width 2s ease;
-webkit-transition: width 0s ease;
-o-transition: width 0s ease;
-moz-transition: width 0s ease;
-ms-transition: width 0s ease;
}    

Javascript代码是

<script>
$(document).ready(function() {
$('.progress-straight .progress-bar-straight').css("width",
function() {
return $(this).attr("aria-valuenow") + "%";
}
)
});
</script>

我这里也有一个jsfiddle

提前谢谢。

Answer 1

您已将转换计时保留为 0。您需要提供一些时间和初始宽度。

$(document).ready(function() {
$('.progress-straight .progress-bar-straight').css("width",
function() {
return $(this).attr("aria-valuenow") + "%";
}
)
});

.progress-straight {
height: 35px;
background: lightcoral;
}
.progress-straight .skill {
font: normal 12px "Open Sans Web";
line-height: 35px;
padding: 0;
margin: 0 0 0 20px;
text-transform: uppercase;
}
.progress-straight .skill .val {
float: right;
font-style: normal;
margin: 0 20px 0 0;
}
.progress-bar-straight {
text-align: left;
transition-duration: 3s;
transition: width 2s ease;
-webkit-transition: width 0s ease;
-o-transition: width 0s ease;
-moz-transition: width 1s ease;
-ms-transition: width 0s ease;
background: red;
margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		 <!-- Skill Bars -->
<div class="progress-straight skill-bar ">
<div class="progress-bar-straight progress-bar-success" role="progressbar" style="width:33%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<span class="skill">HTML <i class="val">100%</i></span>
</div>
</div>
<div class="progress-straight skill-bar">
<div class="progress-bar-straight progress-bar-info" role="progressbar" style="width:33%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" >
<span class="skill">CSS<i class="val">90%</i></span>
</div>
</div>

<div class="progress-straight skill-bar">
<div class="progress-bar-straight progress-bar-warning" role="progressbar" style="width:33%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<span class="skill">JavaScript<i class="val">75%</i></span>
</div>
</div>  

<div class="progress-straight skill-bar">
<div class="progress-bar-straight progress-bar-danger" role="progressbar" style="width:33%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
<span class="skill">Photoshop<i class="val">55%</i></span>
</div>
</div>  

	</div>
</div>

这是您更新的小提琴