Barra di avanzamento con HTML e CSS

Question

Voglio creare una barra di avanzamento, come nell'immagine qui sotto:

Non ho idea sulla creazione di questo. Dovrei usare le tecniche HTML5?

Per favore, potresti darmi un aiuto sulla creazione di questa barra di avanzamento?

Answer 1

<div id="progressbar"> 
    <div></div> 
</div> 

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

Fiddle

(EDIT: cambiata evidenziare la sintassi; cambiato discendente al selettore bambino)

Answer 2

Creare un elemento che mostra la parte sinistra della barra (la parte rotonda), anche creare un elemento per la parte destra. Per la barra di avanzamento attuale, crea un terzo elemento con uno sfondo ripetuto e una larghezza che dipende dal progresso effettivo. Metti tutto sopra l'immagine di sfondo (contenente la barra di avanzamento vuota).

ma suppongo che si sapeva già che ...

Edit: Quando si crea una barra di avanzamento che non utilizzano sfondi testuali. Puoi utilizzare lo border-radius per ottenere l'effetto tondo, come mostrato da Rikudo Sennin e RoToRa!

Answer 3

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>

Answer 4

<div class="loading"> 
    <span class="loader"> 
    <span class="innerLoad">Loading...</span> 
</span> 
    </div> 

CSS

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

}  

Answer 5

Mi piace questo:

• Article
• Demo
• Downloads

molto lisci con solo questo come HTML e il CSS3 riposo che è compatibile (anche se avrà meno eyecandy)

Modifica codice Aggiunto di seguito, ma prese direttamente dalla pagina di cui sopra, tutto il merito a quell'autore

HTML

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

CSS

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

Answer 6

Perché ca non ti basta creare più immagini per ogni parte della barra di stato? Se è un terzo mostra solo un terzo della barra di stato ... è molto semplice.Probabilmente potresti capire come cambiarlo con l'immagine successiva basata sull'input con il tag form. Ecco parte del codice mia, è necessario capire la roba modulo dopo

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

ora sembra semplice, non è vero?

Answer 7

Uguale @ risposta di Rotora, con alcune lievi adeguamenti (colori corretti e dimensioni):

HTML

<div id="progressbar"> 
    <div></div> 
</div> 

CSS

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

Ecco il violino: jsFiddle

Ed ecco come appare:

Answer 8

Ho progettato un'alternativa senza JavaScript. Il valore percentuale si sposta con lo stato di avanzamento utilizzando il contenuto in linea. Testato solo su webkit. Speranza che aiuta:

jsFiddle

CSS:

progress { 
 
\t display:inline-block; 
 
\t width:190px; 
 
\t height:20px; 
 
\t padding:15px 0 0 0; 
 
\t margin:0; 
 
\t background:none; 
 
\t border: 0; 
 
\t border-radius: 15px; 
 
\t text-align: left; 
 
\t position:relative; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 0.8em; 
 
} 
 
progress::-webkit-progress-bar { 
 
\t height:11px; 
 
\t width:150px; 
 
\t margin:0 auto; 
 
\t background-color: #CCC; 
 
\t border-radius: 15px; 
 
\t box-shadow:0px 0px 6px #777 inset; 
 
} 
 
progress::-webkit-progress-value { 
 
\t display:inline-block; 
 
\t float:left; 
 
\t height:11px; 
 
\t margin:0px -10px 0 0; 
 
\t background: #F70; 
 
\t border-radius: 15px; 
 
\t box-shadow:0px 0px 6px #777 inset; 
 
} 
 
progress:after { 
 
\t margin:-26px 0 0 -7px; 
 
\t padding:0; 
 
\t display:inline-block; 
 
\t float:left; 
 
\t content: attr(value) '%'; 
 
}

<progress id="progressBar" max="100" value="77"></progress>

Answer 9

Barra di avanzamento senza div annidati ... per ogni elemento dove i css opere lineari-pendenza.

Qui il JSFiddle http://jsfiddle.net/oj1L3y6t/2/

HTML + CSS + JavaScript

HTML

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

CSS

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

JS

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(); 

Answer 10

Se si desidera avere una barra di avanzamento senza aggiungere del codice PACE può essere uno strumento fantastico per voi.

Inserisci solo pace.js e un tema CSS di tua scelta, e ottieni un bellissimo indicatore di avanzamento per il caricamento della pagina e la navigazione AJAX. La cosa migliore di PACE è il rilevamento automatico dell'avanzamento.

Contiene anche vari temi e combinazioni di colori.

Vale la pena provare.

Answer 11

Esiste un'esercitazione per la creazione di una barra di avanzamento HTML5 here.Se non si desidera utilizzare metodi HTML5 o siete alla ricerca di una soluzione all-browser, provare questo codice:

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

È possibile modificare il colore ORO a qualsiasi colore della barra di progresso e #dbdbdb al background- colore della barra di avanzamento.

Answer 12

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