求进度条HTML样式代码

hanyu1222 2010-02-22 09:51:05
不要说GOOGLE,BAIDU了，搜过了没好点的

有的话直接给我地址，一经采用分数全部相送
...全文
631 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
njciapple 2010-02-23
  • 打赏
  • 举报
 回复 


要完成此效果把如下代码加入到<body>区域中



<form name="loading">

   <div align="center">

    <p><font color="#0000ff"><input name="chart" size="37" style="background-color: black; color: #FF0000; font-family: Arial; font-weight: bolder; border-style: none; padding: 0px"><br><input name="percent" size="53" style="background-color: black; color: #FFFFFF; text-align: center; border-style: none; border-width: medium"> 

    </font> 

      <SCRIPT>  

var bar = 0  

var line = "||"  

var amount ="||"  

count()  

function count(){  

bar= bar+3  

amount =amount  +  line  

document.loading.chart.value=amount  

document.loading.percent.value=bar+"%"  

if (bar<99)  

{setTimeout("count()",100);}  

else  

{window.location = "#";}  //要链接的页面

}  

</SCRIPT>
njciapple 2010-02-23
  • 打赏
  • 举报
 回复 


<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>先飞电脑技术网-仿WinXP登录进度条网页加载Loading效果</title>



</HEAD>

<body style="background:black">

<div style="position:absolute;width:322;height:14;border:1 #707888 solid;overflow:hidden">

	<div style="position:absolute;top:-1;left:0" id="pimg">

	</div>

</div>

<div  style="position:absolute;top:30;left:120;font-size:9pt;color:#f4f4f4" id="abc">

Loading.............

</div>

<script>

s=new Array();

s[0]="#050626";

s[1]="#0a0b44";

s[2]="#0f1165";

s[3]="#1a1d95";

s[4]="#1c1fa7";

s[5]="#1c20c8";

s[6]="#060cff";

s[7]="#2963f8";

function ls(){

		pimg.innerHTML="";

		for(i=0;i<9;i++){

		pimg.innerHTML+="<input style=\"width:15;height:10;border:0;background:"+s[i]+";margin:1\">";

		}

	}

	

function rs(){

		pimg.innerHTML="";

		for(i=9;i>-1;i--){

		pimg.innerHTML+="<input style=\"width:15;height:10;border:0;background:"+s[i]+";margin:1\">";

		}

	}

	

ls();

var g=0;sped=0;

function str(){

	if(pimg.style.pixelLeft<350&&g==0){

	if(sped==0){

		ls();

		sped=1;

		}

	pimg.style.pixelLeft+=2;

	setTimeout("str()",1);

	return;

	}

	g=1;

	if(pimg.style.pixelLeft>-200&&g==1){

	if(sped==1){

		rs();

		sped=0;

		}

	pimg.style.pixelLeft-=2;

	setTimeout("str()",1);

	return;

	}

	g=0;

	str();

}



function flashs(){

if(abc.style.color=="#ffffff"){

	abc.style.color="#707888";

	setTimeout('flashs()',500);

	}

else{

	abc.style.color="#ffffff";

	setTimeout('flashs()',500);

	}

}

flashs();

str();

</script></BODY></HTML>
njciapple 2010-02-23
  • 打赏
  • 举报
 回复 


<form name=loading>

  <p align=center> <font color="#0066ff" size="2" face="Arial">载入中，请稍等...</font><br>

    <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">

    <br>

    <input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">

    <script> 

var bar=0 

var line="||" 

var amount="||" 

count() 

function count(){ 

bar=bar+2 

amount =amount + line 

document.loading.chart.value=amount 

document.loading.percent.value=bar+"%" 

if (bar<99) 

{setTimeout("count()",100);} 

else 

{window.location = "#";} 

}</script>

  </p>

</form>
卡卡西CC 2010-02-23
  • 打赏
  • 举报
 回复
测试过了
8楼和11楼
phyerbarte 2010-02-23
  • 打赏
  • 举报
 回复
引用 14 楼 ladybirds2008 的回复:
引用 10 楼 njciapple 的回复:
HTML code
要完成此效果把如下代码加入到<body>区域中<formname="loading"><divalign="center"><p><fontcolor="#0000ff"><inputname="chart" size="37" style="background-color: black; color: #FF0000; font-family: Arial; font-we?-
为什么就走到99%呢 我看不出来问题，请高手解答啊


这个input做的好有意思。。

改一下就正常了


<form name="loading">

	<div align="center">

    	<p>

    		<font color="#0000ff">

    			<input name="chart" size="46" style="background-color: black; color: #FF0000; font-family: Arial; font-weight: bolder; border-style: none; padding: 0px"><br>

    			<input name="percent" size="53" style="background-color: black; color: #FFFFFF; text-align: center; border-style: none; border-width: medium"> 

    		</font> 

    	</p>

    </div>

</form>

<SCRIPT>  

var bar = 0  

var line = "||"  

var amount ="||"  

count()  

function count(){  

bar= bar+2

amount =amount  +  line  

document.loading.chart.value=amount  

document.loading.percent.value=bar+"%"  

if (bar<100)  

{setTimeout("count()",10);}  

else  

{window.location = "#";}  //??????

}  

</SCRIPT>
ladybirds2008 2010-02-23
  • 打赏
  • 举报
 回复
引用 10 楼 njciapple 的回复:
HTML code
要完成此效果把如下代码加入到<body>区域中<formname="loading"><divalign="center"><p><fontcolor="#0000ff"><inputname="chart" size="37" style="background-color: black; color: #FF0000; font-family: Arial; font-we?-

为什么就走到99%呢 我看不出来问题，请高手解答啊
njciapple 2010-02-23
  • 打赏
  • 举报
 回复
8楼的和10楼的直接复制到html中，看效果
quansheng3510 2010-02-23
  • 打赏
  • 举报
 回复
11楼跟8楼的都可行
火龙果被占用了 2010-02-23
  • 打赏
  • 举报
 回复 
<!-- 让 IE 支持 W3C 盒子模型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

  </head>



<style type="text/css">

div.bar { padding:1px; margin:0; border:1px solid gray; color:darkblue; font-size:0; width:250px; }

</style>



<script type="text/javascript">

window.$ = function(id) {

  return (typeof id == 'string') ? document.getElementById(id) : id;

}



Object.extend = function(dest, src) {

  if(!src) return;

  if(!dest) return;

  if(typeof src != 'object') {

    return;

  }

  for(var property in src) {

    var value = src[property];

    if(typeof value == 'object') {

      Object.extend(dest[property], value);

    } else {

      dest[property] = value;

    }

  }

}



window.onload = function() {



  var b = new ProgressBar( 'bar1', true, { backgroundColor : '#c0c0c0', color : '4b0082' } );

  var percent = 0;

  var s = setInterval(function() {

      if(percent > 100) {

        clearInterval(s);

      }

      b.change(percent);

      percent += 0.73;

    }, 10);

}



/**

 * 进度条

 *

 * @param id  进度条容器的 id 值

 * @param showPercent 是否显示百分比指示

 * @param progressStyle 进度条的样式，默认采用 ProgressBar.DEFAULT_PROGRESS_STYLE

 */

var ProgressBar = function(id, showPercent, progressStyle) {



  var me = this;



  this.bar = $(id);

  this.progressStyle = ProgressBar.DEFAULT_PROGRESS_STYLE;

  Object.extend( this.progressStyle, progressStyle || { } );

  this.progress = createProgress();

  this.showPercent = !!showPercent;



  function createProgress() {

    var p = document.createElement('div');

    me.bar.appendChild(p);

    addStyle(p);

    return p;

  }



  function addStyle(element) {

    if(!element) return;

    for(var property in me.progressStyle) {

      element.style[property] = me.progressStyle[property];

    }

  }

}





/**

 * 进度条默认样式

 */

ProgressBar.DEFAULT_PROGRESS_STYLE = {

    height          : '12px',

    backgroundColor : 'lightsteelblue',

    fontSize        : '12px',

    textAlign       : 'center',

    color           : 'navy'

  };





ProgressBar.prototype = {



  change : function(percent) {

    var c = 0;

    if(typeof percent == 'number') {

      if(percent < 0) {

        c = 0;

      }else if(percent > 100) {

        c = 100;

      }else{

        c = percent;

      }

    }

    this._changeWidth(c);

  },



  _changeWidth : function(percent) {

    this.progress.style.width = percent + '%';

    if(this.showPercent) {

      this.progress.innerHTML = Math.round(percent) + '%';

    }

  }

}

</script>



<body>

  <div class="bar" id="bar1"></div>

</body>

</html>
dinghun8leech 2010-02-22
  • 打赏
  • 举报
 回复
既然网上搜到的都不满足，楼主起码说一下对外观还有什么的要求吧？
把进度条的图切成竖的长条，让其在横长条形的div中平铺显示，再用js改变这个div的宽，逐渐加宽，不就ok了？
zhanghua4109 2010-02-22
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<SCRIPT language=javascript src="JScript.js"></SCRIPT>

<body>
<script type="text/javascript">


</script>

<INPUT type=submit value="开始同步" onclick="Show();">
</body>
</html>


调用js
function $()
{
var elements = new Array();
for (var i = 0; i < arguments.length; i++)
{
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}


function Show(message){
HideElement();
var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
//shield.style.height =document.body.scrollHeight;
shield.style.background = "#333";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
shield.style.opacity = 0;

var alertFram = document.createElement("DIV");
var height="50px";
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.width = "200px";
alertFram.style.height = height;
alertFram.style.left = "35%";
alertFram.style.top = "30%";
// alertFram.style.marginLeft = "-225px" ;
// alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
alertFram.style.background = "#fff";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = height;
alertFram.style.zIndex = "10001";

strHtml =" <div style=\"width:100%; border:#58a3cb solid 1px; text-align:center;padding-top:10px \">";
strHtml+=" <img src=\"load1.gif\"><br>";
if (typeof(message)=="undefined"){
strHtml+=" 正在服务器上执行, 请稍候...";
}
else{
strHtml+=message;
}
strHtml+=" </div>";

strHtml+="<iframe src=\"\" style=\"position:absolute; visibility:inherit;top:0px; left:0px; width:300px; height:100px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>";

alertFram.innerHTML=strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);

this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*100;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
}
}
catch(e){}
}

var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity(shield,c);
}
var ad = setInterval("doAlpha()",1);

eSrc.blur();
document.body.onselectstart = function(){return false;}
document.body.oncontextmenu = function(){return false;}
}


function HideElement(){
var HideElementTemp = new Array('IMG','SELECT','OBJECT','IFRAME');
for(var j=0;j<HideElementTemp.length;j++){
try{
var strElementTagName=HideElementTemp[j];
for(i=0;i<document.all.tags(strElementTagName).length; i++){
var objTemp = document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
continue;
//objTemp.style.visibility="hidden";
objTemp.disabled="disabled"
}
}
catch(e){}
}
}


function Close(){
var shield= $("shield");
var alertFram= $("alertFram");
if(shield!=null) {
document.body.removeChild(shield);
}
if(alertFram!=null) {
document.body.removeChild(alertFram);
}
document.body.onselectstart = function(){return true};
document.body.oncontextmenu = function(){return true};
}
happybelladavid 2010-02-22
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
</head>
<SCRIPT language=javascript src="JScript.js"> </SCRIPT>

<body>
<script type="text/javascript">


</script>

<INPUT type=submit value="开始同步" onclick="Show();">
</body>
</html>


调用js
function $()
{
var elements = new Array();
for (var i = 0; i < arguments.length; i++)
{
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}


function Show(message){
HideElement();
var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
//shield.style.height =document.body.scrollHeight;
shield.style.background = "#333";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
shield.style.opacity = 0;

var alertFram = document.createElement("DIV");
var height="50px";
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.width = "200px";
alertFram.style.height = height;
alertFram.style.left = "35%";
alertFram.style.top = "30%";
// alertFram.style.marginLeft = "-225px" ;
// alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
alertFram.style.background = "#fff";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = height;
alertFram.style.zIndex = "10001";

strHtml =" <div style=\"width:100%; border:#58a3cb solid 1px; text-align:center;padding-top:10px \">";
strHtml+=" <img src=\"load1.gif\"> <br>";
if (typeof(message)=="undefined"){
strHtml+=" 正在服务器上执行, 请稍候...";
}
else{
strHtml+=message;
}
strHtml+=" </div>";

strHtml+=" <iframe src=\"\" style=\"position:absolute; visibility:inherit;top:0px; left:0px; width:300px; height:100px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"> </iframe>";

alertFram.innerHTML=strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);

this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*100;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
}
}
catch(e){}
}

var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity(shield,c);
}
var ad = setInterval("doAlpha()",1);

eSrc.blur();
document.body.onselectstart = function(){return false;}
document.body.oncontextmenu = function(){return false;}
}


function HideElement(){
var HideElementTemp = new Array('IMG','SELECT','OBJECT','IFRAME');
for(var j=0;j <HideElementTemp.length;j++){
try{
var strElementTagName=HideElementTemp[j];
for(i=0;i <document.all.tags(strElementTagName).length; i++){
var objTemp = document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
continue;
//objTemp.style.visibility="hidden";
objTemp.disabled="disabled"
}
}
catch(e){}
}
}


function Close(){
var shield= $("shield");
var alertFram= $("alertFram");
if(shield!=null) {
document.body.removeChild(shield);
}
if(alertFram!=null) {
document.body.removeChild(alertFram);
}
document.body.onselectstart = function(){return true};
document.body.oncontextmenu = function(){return true};
}
pywepe 2010-02-22
  • 打赏
  • 举报
 回复
这个帖子以后可能会用上 哈哈 大家新年好
dinghun8leech 2010-02-22
  • 打赏
  • 举报
 回复
引用 3 楼 hanyu1222 的回复:
要横的进度条，用JS可以控制其显示进度

控制其宽度正好啊。
flybird 2010-02-22
  • 打赏
  • 举报
 回复
ext 自带的有！！！！！！！
hanyu1222 2010-02-22
  • 打赏
  • 举报
 回复
要横的进度条，用JS可以控制其显示进度
html 进度条 样式_使用HTML5创建和样式化进度栏
HTML5引入了进度条元素，该元素使我们能够显示某些任务的进度 ，例如上载或下载，基本上是任何正在进行的事情 在这篇文章中，我们将讨论如何在文档中添加此元素，如何与CSS 样式它和动画进度条计。 让我们开始吧。 推荐读物： 35种精美的进度条设计 基本用法 进度条可以用<progress>添加； 进度值由value ， min和max属性确定，如下所示。 &...
＜ ElementUi组件库： el-progress 进度条Bug及样式调整 ＞
在 Vue + elementUi 开发中，在使用Progress进度条时，往往会因为需求原型太过花里胡哨而烦恼（原本的样式并不能满足需求）。为什么呢？因为这个组件elementUi并没有提供过多的自定义属性及插槽，对的，插槽也没有，不能自定义进度条文本样式。即使在elementUi的文档里面写了属性，但是实际使用并未生效（怀疑是bug）。Tips: 基于 elementUi来说，好像elementUi - Plus升级了，修复了bug，也增加了对应的属性、开放了插槽！
进度天在html中怎么写,html简单进度条代码
html一个简易的进度条，如下图所示怎么做想做一个简易的进度条，类似下图这种，当在第一个页面，进度条第一部分这个不是直接用css控制样式就行了吗 第一个页面蓝1个 第二个蓝2个 以此类推如何用html5在网页上设置进度条首先，我们制作的这个进度条并没有后台数据作为支撑，所以是一个靠js实现的一个简单的页面。 我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现...
HTML 进度条
效果截图： Html页： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="utf-8" /&gt;     &lt;title&gt;进度条&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;div clas
深入理解HTML5样式的四种进度条设计
进度条是用户界面中的一个常用控件，它以图形化的方式向用户展示任务执行的进度。从本质上讲，进度条是信息可视化的体现，通过直观的视觉反馈，帮助用户了解等待时间，从而提高用户在操作过程中的耐心和满意度。一个设计得当的进度条能够在无需用户直接交互的情况下，提升整个应用程序的响应性和可靠性感知。对于开发者来说，进度条不仅限于简单的状态显示，还可以通过优化设计增强用户体验（UX），比如采用动态加载、平滑过渡、高度自定义等策略，使得进度条更符合应用的风格和用户的期望。进度条在移动应用中是不可或缺的一部分。
Java SE

62,621

社区成员

307,251

社区内容

发帖
与我相关
我的任务
社区描述
Java 2 Standard Edition
社区管理员
  • Java SE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章