it-swarm.com.de

Fortschrittsanzeige mit CSS und HTML

Ich versuche, die Benutzeroberfläche wie in der Abbildung gezeigt zu erreichen. Allerdings habe ich wenig Mühe, nachdem ich Kombinationen von Positionierungen ausprobiert habe. Kann mir jemand dabei helfen?

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>
22
Anil Namde

HTML:

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

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

Beispiel hier: http://jsfiddle.net/WawPr/

28
Matt Mitchell

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

interaktive Demo unter http://jsfiddle.net/gaby/Zfzva/

5

ich hatte das gleiche Problem und entwickelte folgendes:

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

HTML:

<div class="noload">
     <span class="loadtext">40%</span>
    <div class="load"></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;

 left: 45%;       
}
4
fubo

Ändern Sie einfach die Onclick-Funktion wie folgt und Sie erhalten eine animierte Version der akzeptierten Lösung 

$('.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/ kann es hier sehen.

dank an 

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

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

1
mceviker

Im folgenden Beispiel habe ich geschützte Leerzeichen hinzugefügt, um zu erreichen, dass der Browser Ihrer Box eine Dimension verleiht. Ohne das würde es leer gehen und somit nicht die richtige Breite und Höhe anwenden.

Vielleicht möchten Sie den Boxen auch eine Position geben: absolut, um sie übereinander zu setzen. Sie sollten auch das style-Attribut anstelle des width-Attributs verwenden, da es für divs kein width-Attribut gibt.

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

Sie müssen mit der Schriftgröße und dem Füllzeichen herumspielen, um die richtige Größe zu erhalten.

1
Senica Gonzalez

% Dynamisch hier zu ändern ist Code

HTML

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

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%
   }
0
ULLAS K

Nehmen Sie dieses Beispiel ...

HTML QUELLTEXT:

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

CSS 

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

JQUERY:

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

Ich habe die Hälfte für dich gearbeitet. 

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

Sie können sich mit den Breiten, Rändern und Polsterungen verwirren! Ich wurde faul und wollte es nicht beenden. lol

0
Blake Tallos