改变进度栏的大小？

Question

我想做一个Javascript来改变进度栏。

<div class="progress-bg">
        <div class="progress-bar">
            <h3 class="raised">$30</h3>
        </div>

            <h3 class="goal">Goal:$45</h3>
    </div>

@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }

.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;

我只想编辑提高的数量在html和进展栏将自动调整。因此，类按类目标除以，所显示的值将是.66，因此我需要将其更改为%，并将其插入html的样式部分。任何帮助这将是伟大的，因为我没有太多的工作与Javascript。

Answer 1

下面是帮助您设置它的jQuery脚本。您需要根据您认为合适的情况修改currentProgress编号：

var currentProgress = 40;

这是jsFiddle：https://jsfiddle.net/GunWanderer/d9yeqsqx/1

不要忘记包括您的jQuery库和引导css和js。

CSS:

<style>
body {
padding: 10px;}

.progress-bar span {color:#fff;}

@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }


.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;
}

</style>  

HTML:

<div class="progress">
    <div id="myProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <span id="currentProgress">$30</span>
    </div>
</div>      
<h3 id="goal" class="goal">Goal:$45</h3>

jQuery脚本：

<script>
$(document).ready(function() {
    //Modify your numbers here:
    var goal = 45;
    var currentProgress = 40;

    //Script:
    var percentage = currentProgress / goal * 100;
    $("#myProgressBar").css("width", percentage + '%');
    var status = '$' + currentProgress + ' (' + Math.round(percentage) + '%)';
    $("#currentProgress").html(status);
    $("#goal").html('Goal: $' + goal);
});
</script>

Answer 2

您只需使用HTML5进度栏，如下所示，它将自动计算和显示结果

​

<progress max="45" value="30"></progress>

​

Answer 3

<div class="progress">
    <div class="progress__bar"></div>
    <div class="progress__bar--progressed"></div>
</div>

CSS

.progress {
    // Your custom modifications
    height: 10px;
    width: 100px;

    position: relative;
}
.progress .progress__bar {
    height: 100%;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0.7;

    background-color: #EEE;
}
.progress .progress__bar--progressed {
    height: 100%;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    background-color: green;
}

JavaScript

var yourWidth = "80%";
document.querySelector('.progress__bar--progressed').style.width = yourWidth;