如何制作进度条

Question

如何在 html/css/javascript 中制作进度条。我真的不想使用 Flash。可以在这里找到类似的内容： http://dustincurtis.com/about.html

全部我真正想要的是一个“进度条”，它可以更改为我在 PHP 中给出的值。你的思考过程是什么？有这方面好的教程吗？

Answer 1

您可以通过 css 控制 div 的宽度来做到这一点。大致是这样的：

<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 发送该宽度值。

Answer 2

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

<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');

Answer 3

http://jqueryui.com/demos/progressbar/

看看，它可能就是你需要的。

Answer 4

您可以使用 progressbar.js; 动画进度条控件和小图表（迷你图）

演示并下载 链接

HTML 使用；

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

JavaScript 的使用；

var progressBar;

window.onload = function(){

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

}

Answer 5

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

该过程很简单：

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

Answer 6

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

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: 此处

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/

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>

希望这对某人有帮助。

Answer 10

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

Answer 11

我知道以下内容目前不起作用，因为浏览器尚不支持它，但也许有一天这会有所帮助：

在发表本文时 attr() 在其他属性比 content 只是一个候选推荐¹。一旦实现，人们就可以创建一个仅包含一个元素的进度条（如 HTML 5 ，但具有更好的样式选项和内部文本）

<div class="bar" data-value="60"></div>

和纯 CSS

.bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

这是当前无法运行演示。

---

¹ 无法想象为什么这没有在任何浏览器中实现。首先，我认为如果您已经拥有 content 的功能，那么扩展它应该不会太难（但说实话，我当然不知道）。第二：上面只是一个很好的例子，展示了这一功能有多么强大。希望他们很快开始支持它，否则它甚至不会成为最终规范的一部分。

Answer 12

您可以为任何可以设置渐变的 html 元素创建进度条。 （非常酷！）在下面的示例中，HTML 元素的背景通过 JavaScript 使用线性渐变进行更新：

myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";

PS 我已将两个位置 percentage 设置为相同，以创建一条硬线。尝试设计，您甚至可以添加边框以获得经典的进度条外观:)

https://jsfiddle.net/uoL8j147/1/

Answer 13

尽管可以使用 setInterval 构建进度条并对其宽度进行动画处理，

以便在制作动画时获得最佳性能必须考虑进度条仅限合成器属性和管理层计数。

这是一个例子：

function update(e){
  var left = e.currentTarget.offsetLeft;
  var width = e.currentTarget.offsetWidth
  var position = Math.floor((e.pageX - left) / width * 100) + 1;
  var bar = e.currentTarget.querySelector(".progress-bar__bar");
  bar.style.transform = 'translateX(' + position + '%)';
}

body {
  padding: 2em;
}

.progress-bar {
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
}

.progress-bar {
  background-color: #669900;
  border-radius: 4px;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  height: 20px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 100%;
}

.progress-bar__bar {
  background-color: #ececec;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 500ms ease-out;
}

Click on progress bar to update value

<div class="progress-bar" onclick="update(event)">
  <div class="progress-bar__bar"></div>
</div>

Answer 14

您可以使用 CSS3 动画重新创建进度条，使其看起来更好。

JSFiddle 演示

HTML

<div class="outer_div">
    <div class="inner_div">
        <div id="percent_count">

    </div>
</div>

CSS/CSS3

.outer_div {
    width: 250px;
    height: 25px;
    background-color: #CCC;
}

.inner_div {
    width: 5px;
    height: 21px;
    position: relative; top: 2px; left: 5px;
    background-color: #81DB92;
    box-shadow: inset 0px 0px 20px #6CC47D;
    -webkit-animation-name: progressBar;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

#percent_count {
    font: normal 1em calibri;
    position: relative;
    left: 10px;
}

@-webkit-keyframes progressBar {
    from {
        width: 5px;
    }
    to {
        width: 200px;
    }
}

Answer 15

您可以使用 ProgressBar.js。无依赖性、简单的 API 并支持主要浏览器。

var line = new ProgressBar.Line('#container');
line.animate(1);

在演示页面中查看更多使用示例。

Answer 16

如果您需要在 php 和 java 脚本中显示和隐藏进度条，请按照此步骤操作。它是一个完整的解决方案，不需要任何库等。

           //Design Progress Bar

  <style>
#spinner
{     
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;

height: 200px;


width: 300px;
margin-left: -300px;

    /*Change your loading image here*/
   background: url(images/loading12.gif) 50% 50% no-repeat ;

}
  </style>

               //Progress Bar inside your Page

<div id="spinner" style=" display:none; ">
</div>                                

    // Button to show and Hide Progress Bar
<input class="submit" onClick="Show()" type="button" value="Show" /> 
<input class="submit" onClick="Hide()" type="button" value="Hide" /> 

            //Java Script Function to Handle Button Event     
<script language="javascript" type="text/javascript">
 function Show()
 {       
  document.getElementById("spinner").style.display = 'inline';
 }
function Hide()
 {       
  document.getElementById("spinner").style.display = 'none';
 }

</script>

图片链接：从此处下载图片

Answer 17

您可以使用setInterval来创建进度条。

function animate() {
  var elem = document.getElementById("bar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#progress-bar-wrapper {
  width: 100%;
  background-color: #ddd;
}

#bar {
  width: 1%;
  height: 30px;
  background-color: orange;
}

<div id="progress-bar-wrapper">
  <div id="bar"></div>
</div>

<br>
<button onclick="animate()">Click Me</button>

Answer 18

我正在写一个类似问题的答案，但已被删除，因此我将其发布在这里，以防它对任何人有用。

标记可以放置在任何地方，即使隐藏也可以占据 50 像素的垂直空间。 （为了让它不占用垂直空间并覆盖顶部 50px，我们可以给 progressContainerDiv 绝对定位（在任何定位元素内）并设置 display 属性的样式visible 属性。）

一般结构基于 这篇极客为极客文章。

const
  progressContainerDiv = document.getElementById("progressContainerDiv");
  progressShownDiv = document.getElementById("progressShownDiv");
let
  progress = 0,
  percentageIncrease = 10;

function animateProgress(){
  progressContainerDiv.style.visibility = "visible";
  const repeater = setInterval(increaseRepeatedly, 100);
  function increaseRepeatedly(){
    if(progress >= 100){
      clearInterval(repeater);
      progressContainerDiv.style.visibility = "hidden";
      progressNumberSpan.innerHTML = "";
      progress = 1;
    }
    else{
      progress = Math.min(100, progress + percentageIncrease);
      progressShownDiv.style.width = progress + "%";
      progressNumberSpan.innerHTML = progress + "%";
    }
  }
}

#progressContainerDiv{
  visibility: hidden;
  height: 40px;
  margin: 5px;
}

#progressBackgroundDiv {
  width: 50%;
  margin-left: 24%;
  background-color: #ddd;
}
  
#progressShownDiv {
  width: 1%;
  height: 20px;
  background-color: #4CAF50;
}

#progressNumberSpan{
  margin: 0 auto;
}

<div id="progressContainerDiv">
  <div id="progressBackgroundDiv">
    <div id="progressShownDiv"></div>
  </div>
  <div id="progressNumberContainerDiv">
    <span id="progressNumberSpan"></span>
  </div>
</div>
<button type="button" onclick="animateProgress()">Go</button>
<div id="display"></div>

Answer 19

<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 15px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 15px;
  color: white;
}
</style>
<body onload="move()">

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

<script>
var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
      }
    }
  }
}
</script>

</body>
</html>