使用 CSS 和 HTML 的进度条布局

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5865825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:23:30  来源:igfitidea点击:

Progress bar layout using CSS and HTML

htmlcssprogress-bar

提问by Anil Namde

I am trying to achieve UI as shown in the image. However I am having little hard time after trying combinations of positioning now I am clueless. Can someone help me with this?

我正在尝试实现如图所示的 UI。但是,在尝试定位组合后,我几乎没有什么困难,现在我一无所知。有人可以帮我弄这个吗?

enter image description here

在此处输入图片说明

<style>
    .progress{
        position:relative;
        width:500px;
    }
    .bar{

    }
    .percent{

    }
</style>
<div class="progress">
    <span class="bar" width="%"></span>
    <span class="percent">50%</span>
</div>

回答by Matt Mitchell

HTML:

HTML:

<div id="progress">
    <span id="percent">30%</span>
    <div id="bar"></div>
</div>

CSS:

CSS:

#progress {
 width: 500px;   
 border: 1px solid black;
 position: relative;
 padding: 3px;
}

#percent {
 position: absolute;   
 left: 50%;
}

#bar {
 height: 20px;
 background-color: green;
 width: 30%;
}

Sample here: http://jsfiddle.net/WawPr/

此处示例:http: //jsfiddle.net/WawPr/

回答by Gabriele Petrioli

.progress{
        position:relative;
        width:500px;
        border:1px solid #333;
        position:relative;
        padding:3px;
    }
    .bar{
        background-color:#00ff00;
        width:50%;
        height:20px;
        transition:width 150ms;
    }
    .percent{
        position:absolute;
        display:inline-block;
        top:3px;
        left:50%;
        transform:translateX(-50%);
    }
<div class="progress">
    <div class="bar"></div >
    <div class="percent">50%</div >
</div>

interactive demo at http://jsfiddle.net/gaby/Zfzva/

http://jsfiddle.net/gaby/Zfzva/ 上的交互式演示

回答by fubo

i had the same problem and developed this:

我遇到了同样的问题并开发了这个:

http://jsfiddle.net/DgXM6/2/

http://jsfiddle.net/DgXM6/2/

HTML:

HTML:

<div class="noload">
     <span class="loadtext">40%</span>
    <div class="load"></div>
</div>

CSS:

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;

 left: 45%;       
}

回答by mcvkr

Just change the onclick function as follows and you will have an animated version of the accepted solution

只需按如下方式更改 onclick 功能,您将拥有已接受解决方案的动画版本

$('.changeprogress').click(function() {
  var width = 1;
  var percent = $(this).text().replace('%','') ;
  var id = setInterval(frame, 25);

  function frame() {
    if (width >= percent) {
      clearInterval(id);
    } else {
      width++;
      $('.bar').css('width', width + '%');
      $('.percent').text(width + '%');
    }
  }

});

http://jsfiddle.net/Zfzva/418/can see it here.

http://jsfiddle.net/Zfzva/418/可以在这里看到。

thanks to

谢谢

https://stackoverflow.com/a/5865894/2815227

https://stackoverflow.com/a/5865894/2815227

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3

回答by ULLAS K

To change % dynamically here is code

在这里动态更改 % 是代码

HTML

HTML

 <div class="progress">
          <span class="percent">{{currentTimer}}</span>
          <div class="bar" [style.width]="progress + '%'"></div>
          <span class="duration">{{duration}}</span>
      </div>

CSS

CSS

.progress {
    width: 100%;   
  //  border: 1px solid black;
    position: relative;
    padding: 0px;
   }

   .percent {
    position: absolute;   
    left: 0%;
   }

   .bar {
    height: 16px;
    background-color: rgb(41, 49, 32);

   }
   .duration {
    position: absolute;   
    left: 90%;
    top:-5%
   }

回答by Alex

In the following sample I added to non breaking spaces to achieve that the browser gives your box a dimension. Without that it would assume it empty and thus not applying the correct width and height.

在下面的示例中,我添加了不间断空格以实现浏览器为您的框提供尺寸。没有它,它会假设它是空的,因此不会应用正确的宽度和高度。

You also might want to give the boxes a position:absolute, for putting them on top of each other. You also should use the style attribute instead of the width attribute since there is no width attribute for divs.

您可能还想给盒子一个 position:absolute,以便将它们放在彼此的顶部。您还应该使用 style 属性而不是 width 属性,因为 div 没有 width 属性。

<style>
    .progress{
        border: 1px solid black;
        position:relative;
        width:500px;
    }
    .bar{
        background-color: #00ff00;
        position:absolute;
    }
    .percent{
        position:absolute;
        left:200px;
    }
</style>
<div class="progress">
    <div class="bar" style="width:50%">&nbsp;</div>
    <div class="percent">50%</div>
    &nbsp;
</div>

回答by Senica Gonzalez

<style>
.progress{
    position:relative;
    width:500px;
    height:30px;
    border:1px solid #000;
}
.bar{
  //Change width with javascript
  position:absolute;
  top:0px; left:0px;
  background:#0F3;
  max-width:500px;
  height:30px;
}
.percent{
   position:relative;
   width:100%;
   text-align:center;
   font-size:18px;
   padding:10px;
}
</style>
<div class="progress">
<div class="percent"><span>50%</span><div class="bar"></div></div>
</div>

You'll have to play around with the font-size and padding to get it just right, but that should about do it.

您必须调整字体大小和填充以使其恰到好处,但这应该可以做到。

回答by Imran Khan

Take this example....

拿这个例子....

HTML CODE:

HTML代码:

<div id="progressbar" style="height:25px;">
    <span class="text"></span>
</div>

CSS

CSS

.text { 
    color: black;
    margin-left: 130px;
    position: absolute;
}

JQUERY:

查询:

$( "#progressbar" ).progressbar({ 
   value: some_Value;
 });
$("#progressbar span.text").text(some_Value + "%");

回答by Blake Tallos

I did half the work for you.

我为你做了一半的工作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <style type="text/css">
 #container { width:350px; }
 #main_bar {
    width:374px;
    height:35px;
    border:1px solid #111;
 }
 #inner_bar {
    float;left;
    width:150px; 
    background:#00ff00;
    margin:-20px 0 0 5px;
}
p {
    margin-top:-33px;
    text-align:center; }

</style>

    <title>The document title</title>
  </head>
  <body>
    <div id="container">
    <div id="main_bar">
    </div><!--#main_bar-->
    <div id="inner_bar">
    <p>hello</p>
    </div><!--#inner_bar-->
    <p>30%</p>
</div>
  </body>
</html>

You can mess with the widths, margins, paddings! I got lazy, and didn't want to finish it. lol

你可以弄乱宽度、边距、填充!我很懒,不想完成它。哈哈