Bootstrap进度条进展 [英] Bootstrap progress bar progression

问题描述

我使用bootstrap来创建我的网站，我正在尝试使用进度条。我想要做的是在PHP中完成一个函数（我有10个函数要做）之后，我将该进度栏提前10％。我相信他是用java脚本完成的，但我不确定如何使用bootstrap来完成这项工作，而且我目前的网络搜索还没有发现任何我可以使用的东西。 （有一些例子，当页面加载进度到100％，但我不知道这些工作如何）

I am using bootstrap to create my website and I am trying to use a progress bar. What I am trying to do is after I complete a function in PHP (I have 10 functions to do) I advance the progress of the bar by 10%. I believe his is done using java-script but I am unsure on how to do it with bootstrap and my current web searches have not turned up anything I could use. (there are examples of when the page loads progress to 100% but I don't know how these work)

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%;"></div>
</div>

以上是我对引导程序进度条的HTML定义。我知道改变宽度会改变填充内容的百分比，但我不知道如何在完成一个函数之后改变它（函数全部在一个页面中一个接一个地运行）。

This above is my HTML definition of the bootstrap progress bar. I know changing the width changes the percentage of what is filled in but I don't know how to change it after I have completed a function (functions are all in one page ran one after another).

有人可以帮忙吗？或指向正确的方向？

Could someone help? or point me in the right direction?

推荐答案

首选使用 JQuery

$(".bar").css("width", "50%");

或使用Javascript

or in Javascript

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";

这篇关于Bootstrap进度条进展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！