如何制作进度条
如何在html / css / javascript中制作进度条。 我真的不想使用Flash。 在这里可以find一些东西： http ： //dustincurtis.com/about.html
我真正想要的是一个“进度条”，它改变了我在PHP中给出的值。 你的过程是什么？ 有没有什么好的教程呢？
你可以通过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发送。
如果您使用的是HTML5，则最好使用新引入的<progress>标签。
<progress value="22" max="100"></progress>
或者创build一个你自己的进度条。
用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');
http://jqueryui.com/demos/progressbar/
检查一下，这可能是你需要的。
你可以使用progressbar.js; animation进度条控件和小图（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); }
基本上是这样的：你有三个文件：长时间运行的PHP脚本，由Javascript控制的进度条（ @SapphireSun提供了一个选项 ）和一个进度脚本。 最难的部分是进度脚本; 您的长脚本必须能够报告其进展，而无需直接与您的进度脚本进行沟通。 这可以以会话ID的forms映射到进度表，数据库或者什么还没有完成。
这个过程很简单：
- 执行你的脚本并将进度条清零
- 使用AJAX，查询你的进度脚本
- 进度脚本必须以某种方式检查进度
- 更改进度栏以反映该值
- 清理完成后
我试了一个简单的进度条。 不可点击只显示实际百分比。 这里有一个很好的解释和代码： http : //ruwix.com/simple-javascript-html-css-slider-progress-bar/
这是我的方法，我试图保持苗条：
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; }
小提琴： 这里
使用纯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>
var myPer = 35; $("#progressbar") .progressbar({ value: myPer }) .children('.ui-progressbar-value') .html(myPer.toPrecision(3) + '%') .css("display", "block");
我知道以下目前不能正常工作，因为浏览器不支持它，但也许有一天这将有助于：
在这个postattr()的时候，除了content以外，其他的属性都只是候选推荐 1 。 一旦实现，就可以创build一个只有一个元素的进度条（如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) "%"; }
这里是目前不工作的演示 。
1无法想象为什么这不是在任何浏览器中实现的。 首先我会想，如果你已经有了content的function，那么扩展这个function应该不会太难（当然我不太清楚）。 第二：以上只是一个很好的例子，显示了这个function的强大程度。 希望他们很快就会开始支持它，否则它甚至不会成为最终规范的一部分。
我用这个进度条 。 有关这方面的更多信息，你可以通过这个链接，即定制，编码等
<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>
希望这可能对某个人有帮助。
您可以创build任何可以设置渐变的HTML元素的进度条。 （很酷！）在下面的示例中，HTML元素的背景是使用JavaScript的线性渐变更新的：
myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";
PS我已经设置了两个位置的percentage相同，以创build一个强硬的路线。 玩这个devise，你甚至可以添加一个边框来获得经典的进度条外观:)
你可以使用CSS3animation重新创build进度条，使其更好看。
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; } }
你可以使用ProgressBar.js 。 没有依赖关系，简单的API和支持主stream浏览器。
var line = new ProgressBar.Line('#container'); line.animate(1);
在演示页面查看更多使用示例。
如果你需要在你的php和java脚本中显示和隐藏进度条，那么按照这个步骤进行操作。它是一个完整的解决scheme，不需要任何库。
//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>
图片链接： 从这里下载图片
