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>标记。

<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;动画进度条控件和小图表（迷你图）

演示并下载link

enter image description here

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 gives an option）和一个进度脚本。难点在于进步脚本;您的长脚本必须能够在不直接与您的进度脚本通信的情况下报告其进度。这可以是会话ID映射到进度表，数据库或检查未完成的形式。

这个过程很简单：

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

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;
}

小提琴：here

enter image description here

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

我使用了这个progress bar。有关这方面的更多信息，您可以查看link即自定义，编码等。

<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以外的其他属性只是Candidate Recommendation ¹。一旦实现，就可以创建一个只包含一个元素的进度条（如HTML 5 <progress/>，但内部有更好的样式选项和文本）

<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) "%";
}

Here is the currently not working demo

¹无法想象为什么在任何浏览器中都没有实现。首先，我认为如果你已经拥有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

<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>

Answer 14

我正在写一个类似问题的答案，该问题已被删除，因此我将其张贴在这里，以防任何人使用。

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

一般结构基于this Geeks for Geeks article中提供的代码。

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;
}

Answer 15

您可以使用 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 16

尽管可以build a progress bar using setInterval and animating its width

要获得最佳效果，同时制作进度条动画，必须考虑compositor only properties and manage layer count。

这里是一个例子：

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 17

如果您需要在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>

图片链接：Download image from here

Answer 18

您可以使用ProgressBar.js。没有依赖关系，简单的API并支持主流浏览器。

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

查看更多使用示例in the demo page.

Answer 19

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

JSFiddle Demo

<强> 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;
    }
}

如何制作进度条

19 个答案: