Fortschrittsbalken mit HTML und CSS

80

Ich möchte einen Fortschrittsbalken wie im folgenden Bild erstellen:

Beispiel für einen Fortschrittsbalken

Ich habe keine Ahnung, wie ich das schaffen soll. Soll ich HTML5-Techniken verwenden?

Würden Sie mir bitte beim Erstellen dieses Fortschrittsbalkens helfen?

html css progress-bar Shahin
quelle

Antworten:

207 

#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
Erweitern Sie das Snippet

Geige

(BEARBEITEN: Geänderte Syntaxhervorhebung; Nachkomme in untergeordneten Selektor geändert)

RoToRa
quelle
3
Einige finden den Fortschrittsbalken mit zentrierter Prozentanzeige möglicherweise noch nützlicher.
Tomáš Zato - Wiedereinsetzung Monica
20

http://jsfiddle.net/cwZSW/1406/

#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
<div id="progress"></div>
Erweitern Sie das Snippet

Madaras Geist
quelle
3
Abhängig von Ihrem Browser müssen Sie verwenden border-radius, -webkit-border-radiusoder-moz-border-radius
Veger
Ein großes Lob dafür, dass Sie nur 3 Minuten dafür brauchen. Sie müssen eine super talentierte Person in der Fortschrittsanzeige sein! Beeindruckend!
Daniël Tulp
@ Daniel warum danke! Es ist schön, wenn die Leute es bemerken!
Madara Ghost
6
Das einzige Problem bei dieser Lösung ist, dass es für JavaScript-Code sehr schwierig ist, die Länge des: after-Pseudoelements zu ändern, da es nicht Teil des DOM ist. Es sei denn, ich vermisse etwas.
FrontierPsycho
16

Antwort 2014 : Seit 2014 enthält HTML 5 ein<progress> element JavaScript, das kein JavaScript benötigt. Der Prozentwert bewegt sich mit dem Fortschritt mithilfe von Inline-Inhalten. Nur im Webkit getestet. Ich hoffe es hilft:

jsFiddle

CSS:

progress {
	display:inline-block;
	width:190px;
	height:20px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height:11px;
	width:150px;
	margin:0 auto;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:11px;
	margin:0px -10px 0 0;
	background: #F70;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress:after {
	margin:-26px 0 0 -7px;
	padding:0;
	display:inline-block;
	float:left;
	content: attr(value) '%';
}
<progress id="progressBar" max="100" value="77"></progress>
Erweitern Sie das Snippet

Andrelo
quelle
Ab 2020 in allen Browsern recht gut unterstützt: caniuse.com/#feat=progress
frackham
Ist es nicht etwas unrealistisch zu sagen, dass es kein Javascript benötigt? Ich meine, das Element selbst ist eine ziemlich einfache visuelle Komponente, aber wenn Sie jemals einen Wert daraus ziehen wollen, MÜSSEN Sie die Eigenschaft "value" irgendwie dynamisch festlegen. Wie wird das sein? Ich würde wetten, Javascript zu erraten. Dann stellt sich die Frage, ob dieses Element tatsächlich so viel Komfort oder Nutzen bietet, wenn es nicht wirklich viel bewirkt, sondern etwas auf sehr kontrollierte Weise präsentiert.
Lev
4

Ich mag dieses:

sehr schick mit nur diesem als HTML und dem Rest CSS3, das abwärtskompatibel ist (obwohl es weniger eyecandy haben wird)

Bearbeiten Hinzugefügter Code unten, aber direkt von der obigen Seite übernommen, alle Gutschriften an diesen Autor

.meter {
  height: 20px;
  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter>span {
  display: block;
  height: 100%;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #f1a165;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
<div class="meter">
  <span style="width: 33%"></span>
  <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>
Erweitern Sie das Snippet

Daniël Tulp
quelle
2
Beachten Sie, dass von Antworten nur mit Links abgeraten wird. SO-Antworten sollten der Endpunkt einer Suche nach einer Lösung sein (im Gegensatz zu einem weiteren Zwischenstopp von Referenzen, die im Laufe der Zeit veralten). Bitte fügen Sie hier eine eigenständige Zusammenfassung hinzu, wobei Sie den Link als Referenz behalten.
Kleopatra
@kleopatra, vielen Dank, dass Sie die Website nutzbar gemacht haben. Ich weiß, dass nur Links (sicherlich zu Websites wie jsfiddle) nicht empfohlen werden. Ich werde den Code hinzufügen, den ich verwendet habe.
Daniël Tulp
4

Entspricht der Antwort von @ RoToRa, mit einigen geringfügigen Anpassungen (korrekte Farben und Abmessungen):

body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar>div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
Erweitern Sie das Snippet

Hier ist die Geige: jsFiddle

Und so sieht es aus: jsFiddle-Screenshot

DaJF
quelle
4

In modernen Browsern können Sie ein CSS3- und HTML5-Fortschrittselement verwenden!

progress {
  width: 40%;
  display: block; /* default: inline-block */
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} 
<progress max="100" value="40"></progress>
Erweitern Sie das Snippet

Sanxofon
quelle
3

Fortschrittsbalken ohne verschachtelte Divs ... für jedes Element, bei dem der lineare CSS-Gradient funktioniert.

Hier die JSFiddle http://jsfiddle.net/oj1L3y6t/2/

function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();
#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}
<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>
Erweitern Sie das Snippet

James
quelle
2

Erstellen Sie ein Element, das den linken Teil der Leiste (den runden Teil) anzeigt, und erstellen Sie auch ein Element für den rechten Teil. Erstellen Sie für den tatsächlichen Fortschrittsbalken ein drittes Element mit einem sich wiederholenden Hintergrund und einer Breite, die vom tatsächlichen Fortschritt abhängt. Legen Sie alles auf das Hintergrundbild (mit dem leeren Fortschrittsbalken).

Aber ich nehme an, Sie wussten das schon ...

Bearbeiten : Beim Erstellen eines Fortschrittsbalkens, der keinen Texthintergrund verwendet. Sie können den verwenden border-radius, um den runden Effekt zu erzielen, wie von Rikudo Sennin und RoToRa gezeigt !

Veger
quelle
1 

.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}
<div class="loading">
  <span class="loader">
     	<span class="innerLoad">Loading...</span>
  </span>
</div>
Erweitern Sie das Snippet

user2579594
quelle
1 
    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    <div class="black-strip">
        <div class="green-strip">
        </div>
   </div>
Mujahid Hussain
quelle
0

Wenn Sie einen Fortschrittsbalken haben möchten, ohne Code hinzuzufügen, kann PACE ein großartiges Werkzeug für Sie sein.

Fügen Sie einfach schritt.js und ein CSS-Thema Ihrer Wahl hinzu, und Sie erhalten eine schöne Fortschrittsanzeige für das Laden Ihrer Seite und die AJAX-Navigation. Das Beste an PACE ist die automatische Erkennung des Fortschritts.

Es enthält auch verschiedene Themen und Farbschemata.

Einen Versuch wert.

Anurag Verma
quelle
0 
.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}
Tyler Donath
quelle
Dies ist, was ich verwendet habe ... für ein Codierungsprojekt in der Mittelschule, es ist nicht das schönste, aber es funktioniert
Tyler Donath
1
Es ist nicht nur nicht das Schönste, es ist auch nicht gültig und funktioniert nicht. CSS-Eigenschaften enthalten keine Leerzeichen. Zum Beispiel background - color: blue;muss seinbackground-color: blue;
Matijs
0

Verwenden von setInterval.

var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth>=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
Erweitern Sie das Snippet

Verwenden von CSS Transtitions.

function loading()
{
    document.getElementById("progress").style.width="200px";
}
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>
Erweitern Sie das Snippet

Vignesh Raja
quelle
0

Es gibt ein Tutorial ein HTML5 - Fortschrittsbalken für die Erstellung von hier . Wenn Sie keine HTML5-Methoden verwenden möchten oder nach einer All-Browser-Lösung suchen, versuchen Sie diesen Code:

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
  <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>
Erweitern Sie das Snippet

Sie können die Farbe GOLD in eine beliebige Fortschrittsbalkenfarbe und #dbdbdb in die Hintergrundfarbe Ihres Fortschrittsbalkens ändern.

Cannizid
quelle
-3

Warum können Sie nicht einfach mehrere Bilder für jeden Teil der Statusleiste erstellen? Wenn es ein Drittel ist, zeigen Sie nur ein Drittel der Statusleiste ... es ist sehr einfach. Sie könnten wahrscheinlich herausfinden, wie Sie es basierend auf der Eingabe mit dem Formular-Tag zum nächsten Bild ändern können. Hier ist mein Teil des Codes, Sie müssen das Formularmaterial später herausfinden

<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>

Jetzt scheint es einfach zu sein, nicht wahr?

user4093060
quelle