Barra de progreso con HTML y CSS

82

Quiero crear una barra de progreso como en la siguiente imagen:

Ejemplo de barra de progreso

No tengo ni idea de cómo crear esto. ¿Debería utilizar técnicas HTML5?

¿Podrías ayudarme a crear esta barra de progreso?

html css progress-bar Shahin
fuente

Respuestas:

211 

#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>
Expandir fragmento

Violín

(EDITAR: resaltado de sintaxis cambiado; descendiente cambiado al selector de niños)

RoToRa
fuente
3
Algunos pueden encontrar la barra de progreso con indicador de porcentaje centrado aún más útil.
Tomáš Zato - Reincorpora a 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>
Expandir fragmento

Fantasma de Madara
fuente
3
Dependiendo de su navegador que necesite usar border-radius, -webkit-border-radiuso-moz-border-radius
Veger
Felicitaciones por tomar solo 3 minutos para hacer esto, ¡debes ser una persona súper talentosa en la barra de progreso! ¡Guauu!
Daniël Tulp
@Daniel ¡por qué gracias! ¡Es agradable cuando la gente se da cuenta!
Madara's Ghost
6
El único problema con esta solución es que es muy difícil para el código JavaScript modificar la longitud del pseudo-elemento: after, porque no es parte del DOM. A menos que me esté perdiendo algo.
FrontierPsycho
17

Respuesta de 2014 : Desde 2014, HTML ahora 5 incluye un código<progress> element que no necesita JavaScript. El valor de porcentaje se mueve con el progreso utilizando contenido en línea. Probado solo en webkit. Espero eso ayude:

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

Andrelo
fuente
A partir de 2020, se admite bastante bien en todos los navegadores: caniuse.com/#feat=progress
frackham
¿No es poco realista decir que "no necesita Javascript"? Quiero decir, el elemento en sí es un componente visual bastante simple, pero si alguna vez va a obtener algún valor de él, NECESITA establecer dinámicamente la propiedad "valor" de alguna manera. ¿Cómo va a ser eso? Apostaría a adivinar Javascript. Entonces, la pregunta es si este elemento realmente proporciona tanta conveniencia o beneficio, cuando en realidad no hace mucho pero presenta algo de una manera muy controlada.
Lev
4

Me gusta este:

muy hábil con solo esto como HTML y el resto CSS3 que es compatible con versiones anteriores (aunque tendrá menos atractivo visual)

Edite el código agregado a continuación, pero tomado directamente de la página anterior, todo crédito a ese 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>
Expandir fragmento

Daniël Tulp
fuente
2
Tenga en cuenta que se desaconsejan las respuestas de solo enlace , las respuestas SO deben ser el punto final de la búsqueda de una solución (frente a otra escala de referencias, que tienden a volverse obsoletas con el tiempo). Considere agregar una sinopsis independiente aquí, manteniendo el enlace como referencia.
kleopatra
@kleopatra, gracias por mantener el sitio web utilizable. Sé que solo se desaconseja el enlace (ciertamente a sitios como jsfiddle). Agregaré el código que usé.
Daniël Tulp
4

Igual que la respuesta de @ RoToRa, con algunos ajustes leves (colores y dimensiones correctos):

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

Aquí está el violín: jsFiddle

Y así es como se ve: jsFiddle: captura de pantalla

DaJF
fuente
4

En los navegadores modernos, puede utilizar un elemento de progreso CSS3 y HTML5.

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

Sanxofon
fuente
3

Barra de progreso sin divs anidados ... para cada elemento donde funciona el gradiente lineal css.

Aquí el 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>
Expandir fragmento

James
fuente
2

Cree un elemento que muestre la parte izquierda de la barra (la parte redonda), también cree un elemento para la parte derecha. Para la barra de progreso real, cree un tercer elemento con un fondo repetido y un ancho que dependa del progreso real. Ponlo todo encima de la imagen de fondo (que contiene la barra de progreso vacía).

Pero supongo que ya lo sabías ...

Editar : al crear una barra de progreso que no usa fondos textuales. ¡Puedes usar el border-radiuspara obtener el efecto redondo, como lo muestran Rikudo Sennin y RoToRa !

Veger
fuente
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>
Expandir fragmento

usuario2579594
fuente
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
fuente
0

Si desea tener una barra de progreso sin agregar código, PACE puede ser una herramienta increíble para usted.

Solo incluye pace.js y un tema CSS de tu elección, y obtendrás un hermoso indicador de progreso para la carga de tu página y la navegación AJAX. Lo mejor de PACE es la detección automática de progreso.

También contiene varios temas y esquemas de color.

Vale la pena intentarlo.

Anurag Verma
fuente
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
fuente
esto es lo que usé ... para un proyecto de codificación de la escuela secundaria, no es el más bonito pero funciona
Tyler Donath
1
No solo no es el más bonito, tampoco es válido y no funcionará. Las propiedades CSS no tienen espacios. Por ejemplo, background - color: blue;debe serbackground-color: blue;
Matijs
0

Usando 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>
Expandir fragmento

Usando 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>
Expandir fragmento

Vignesh Raja
fuente
0

Hay un tutorial para crear una barra de progreso HTML5 aquí . Si no desea utilizar métodos HTML5 o está buscando una solución para todos los navegadores, pruebe este código:

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

Puede cambiar el color ORO a cualquier color de la barra de progreso y #dbdbdb al color de fondo de su barra de progreso.

Cannicida
fuente
-3

¿Por qué no puede simplemente crear varias imágenes para cada parte de la barra de estado? Si es un tercio, muestre un tercio de la barra de estado ... es muy simple. Probablemente pueda descubrir cómo cambiarlo a la siguiente imagen en función de la entrada con la etiqueta del formulario. Aquí está mi parte del código, tienes que averiguar el formulario más tarde

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

Ahora parece simple, ¿no?

user4093060
fuente