Ich möchte einen Fortschrittsbalken wie im folgenden Bild erstellen:
Ich habe keine Ahnung, wie ich das schaffen soll. Soll ich HTML5-Techniken verwenden?
Würden Sie mir bitte beim Erstellen dieses Fortschrittsbalkens helfen?
Fortschrittsbalken mit HTML und CSS
Antworten:
#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>(BEARBEITEN: Geänderte Syntaxhervorhebung; Nachkomme in untergeordneten Selektor geändert)
3
Einige finden den Fortschrittsbalken mit zentrierter Prozentanzeige möglicherweise noch nützlicher.
—
Tomáš Zato - Wiedereinsetzung Monica
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>
Abhängig von Ihrem Browser müssen Sie verwenden
—
Veger
border-radius, -webkit-border-radiusoder-moz-border-radius
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
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
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:
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>
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
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>
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
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>Hier ist die Geige: jsFiddle
Und so sieht es aus:
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>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>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 !
.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> .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>
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.
.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;
}
Dies ist, was ich verwendet habe ... für ein Codierungsprojekt in der Mittelschule, es ist nicht das schönste, aber es funktioniert
—
Tyler Donath
Es ist nicht nur nicht das Schönste, es ist auch nicht gültig und funktioniert nicht. CSS-Eigenschaften enthalten keine Leerzeichen. Zum Beispiel
—
Matijs
background - color: blue;muss seinbackground-color: blue;
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>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>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"> </div>
</div>Sie können die Farbe GOLD in eine beliebige Fortschrittsbalkenfarbe und #dbdbdb in die Hintergrundfarbe Ihres Fortschrittsbalkens ändern.
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?