如何使用 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 here

提前致谢。

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>

这是你更新的小提琴