如何制作一个进度条

Question

如何在html/css/javascript中制作进度条？我不想使用Flash。类似于这里找到的内容：http://dustincurtis.com/about.html 我只需要一个“进度条”，可以根据我在PHP中给出的值进行更改。您会考虑什么？有没有好的教程？

- john mossel

Answer 1

您可以通过控制 div 元素的宽度来实现，使用 CSS。以下是大致的代码：

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

如果需要的话，可以从 PHP 中传入该宽度值。

- Sam Dufel

---

谢谢，我也是这么想的，但我还以为会有其他的方法来做到它。 - john mossel

由于某些原因，我在使用HTML5的<progress>标签时遇到了问题，你的解决方案非常有用 :) - noviewpoint

建议：两个div应该都设置为height:50px;。 - HoldOffHunger

Answer 2

如果您使用的是 HTML5，最好使用新引入的 <progress> 标签。

<progress value="22" max="100"></progress>

或者自己创建一个进度条。

示例使用sencha编写。

if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');

- najeeb

---

@TejeshAlimilli HTML5的支持有限吗？网络上有数百万篇文章，这里也有成千上万个问题。我不认为这是“有限的支持”... - trejder

@trejder 我看到我两年前的评论现在已经不相关了，所以删除了它。 - Tejesh Alimilli

Answer 3

点击这里查看，或许这正是你需要的。

- SapphireSun

---

我看过那个，很棒，但唯一的问题是我想要完全改变它的外观。我认为你不能这样做。 - john mossel

你可以使用CSS改变它的外观。 - netrox

Jquery UI 还有一个自定义样式的功能，可以让你接近你想要的效果，然后像之前提到的那样，通过 CSS 进行进一步调整。 - Dale

Answer 4

您可以使用progressbar.js;来创建动画进度条和小型图表（Sparkline）。

演示和下载链接：链接

HTML用法：

<div id="my-progressbar"></div>

Javascript 的使用方法;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}

- bugra ozden

Answer 5

基本上就是这样：您有三个文件：长时间运行的PHP脚本，由Javascript控制的进度条（@SapphireSun提供了一个选项），以及一个进度脚本。难点在于进度脚本；您的长脚本必须能够报告其进度，而不需要直接与进度脚本通信。这可以采用会话ID映射到进度计、数据库或检查未完成的内容的形式。

流程很简单：

1. 执行您的脚本并将进度条清零
2. 使用AJAX查询您的进度脚本
3. 进度脚本必须以某种方式检查进度
4. 更改进度条以反映该值
5. 完成后进行清理

- TheLQ

Answer 6

我尝试了一个简单的进度条。它不能被点击，只显示实际百分比。这里有一个很好的解释和代码：http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

- Fricike

Answer 7

这里是我的方法，我尽量保持简洁： HTML：

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

CSS：

.load{    
    width: 50%;
    height: 12px;
    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.noload{
    width: 100px;    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);     
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: -1px;
}

Fiddle: 这里

- fubo

Answer 8

使用纯Javascript实现无限进度条

<div id="container" style="width:100%; height:5px; border:1px solid black;">
  <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div>
</div>

<script>
  var width = 0;
  window.onload = function(e){ 
    setInterval(function () {
        width = width >= 100 ? 0 : width+5;  
        document.getElementById('progress-bar').style.width = width + '%'; }, 200);            
  }
</script>

示例 http://fiddle.jshell.net/1kmum4du/

- pymen

Answer 9

我使用了这个进度条。若想了解更多信息，可以访问这个链接，包括自定义、编码等等。

<script type="text/javascript">

var myProgressBar = null
var timerId = null

function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
    borderRadius: 10,
    width: 300,
    height: 20,
    maxValue: 100,
    labelText: "Loaded in {value,0} %",
    orientation: ProgressBar.Orientation.Horizontal,
    direction: ProgressBar.Direction.LeftToRight,
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
    animationSpeed: 1.5,
    imageUrl: 'images/v_fg12.png',
    backgroundUrl: 'images/h_bg2.png',
    markerUrl: 'images/marker2.png'
});

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue)
        myProgressBar.setValue(0);
    else
        myProgressBar.setValue(myProgressBar.value+1);

},
100);
}

loadProgressBar();
</script>

希望这对某些人有所帮助。

- surhidamatya

Answer 10

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

- san