如何为进度条进行灵活设计

Question

我有一个由下面列出的代码生成的进度条。我希望在我的网站上多次使用进度条，我希望每次声明一个栏时能够显示不同的进度％。因此，我想知道允许我在CSS文件中将to { width: x% }更改为所需的进度％的最佳方法。

jsfiddle 获得40％的进展示例：http://jsfiddle.net/gbmrsoj2/

<div id="progressbar">
    <div id="progress">
    </div>
</div>

body {
    padding: 40px;
}

#progressbar {
    width: 100%;
    height: 20px;
    background-color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 3px;
    border: 3px solid #666666;
    clear: both;
}

#progress {
    background: green;
    height: 20px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

@-webkit-keyframes progress { 
    from { }
    to { width: 40% }
}

@-moz-keyframes progress { 
    from { }
    to { width: 40% }
}

@-ms-keyframes progress { 
    from { }
    to { width: 40% }
}

@keyframes progress { 
    from { }
    to { width: 40% }
}

Answer 1

使用CLASS和内部元素（宽度）

＆＃13;

＆＃13;

body {padding: 40px;}

.progress-bar{
  box-sizing:padding-box;
  border-radius: 25px;
  display:inline-block;
  width:100%;
  height: 20px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #666;
}
.progress-bar > span{
  display:inline-block;
  border-radius: 25px;
  height:20px;
  background:green;
}

＆＃13;

<span class="progress-bar">
  <span style="width:40%"></span>
</span>

＆＃13;

＆＃13;

＆＃13;

使用backround-size

＆＃13;

＆＃13;

body {padding: 40px;}

.progress-bar{
  box-sizing:padding-box;
  border-radius: 25px;
  display:inline-block;
  width:100%;
  height: 20px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #666;
  background: no-repeat url(//placehold.it/200x200/080) 0 0;
}

＆＃13;

<span class="progress-bar" style="background-size:40%"></span>

＆＃13;

＆＃13;

＆＃13;

样式type=range输入元素

我使用带有范围属性的<input>元素创建了 HTML5 示例：

＆＃13;

＆＃13;

body {padding: 40px;}

input[type=range]{
  -webkit-appearance: none;
  width:100%;
  background: transparent;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  height: 26px;
  border: 3px solid transparent;
  box-shadow: 0 0 0 3px #666;
}
input[type=range]:focus{ outline: none;}
input[type=range]::-webkit-slider-runnable-track {
  height:26px;
}
input[type=range]::-webkit-slider-thumb{
  position:relative;
  -webkit-appearance: none;
  border-radius: 25px;
  height:100%;
  width:0;
  background: red;
}
input[type=range]::-webkit-slider-thumb:after{
  position:absolute;
  background: green;
  border-radius: 25px;
  height:20px;
  right:0;
  top:3px;
  width:1000px;
  content: "hello"
}

＆＃13;

<input type=range value=30>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我发现这个库真的很棒。

http://ricostacruz.com/nprogress/

但如果您想自己动手并制作动画，

＆＃13;

＆＃13;

body {
	padding: 40px;
}

#progressbar {
	width: 100%;
	height: 20px;
	background-color: white;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 3px;
	border: 3px solid #666666;
	clear: both;
}

#progress {
	background: green;
	height: 20px;
	width: 0%;
	max-width: 100%;
	float: left;
	-webkit-animation: progress 2s 1 forwards;
	-moz-animation: progress 2s 1 forwards;
	-ms-animation: progress 2s 1 forwards;
	animation: progress 2s 1 forwards;

	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;

    -webkit-transition: all 1s ease-out;

}

#progress.progress-40{
    width:40%;
}

＆＃13;

<script>
function progress(id, percent){
        setTimeout(function(){
         var element = document.getElementById(id);
         if(element){
            element.style.width = percent + '%';
          }
        },1);
}
        
    </script>

<div id="progressbar">
	<div id="progress"></div>
    <script>
        progress('progress',40);
    </script>
</div>

＆＃13;

＆＃13;

＆＃13;