css - cards - progress bar javascript
Twitter Bootstrap: texto central en la barra de progreso (3)
Bootstrap 3 responde, como se muestra en el ejemplo de arranque
<div class="progress text-center">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
<span>40% Left</span>
</div>
He estado usando el bootstrap de Twitter y me gustaría que el texto en la barra de progreso se centre en la barra, independientemente del valor.
El siguiente enlace es lo que tengo ahora. Me gustaría que todo el texto se alinee con la barra inferior.
Captura de pantalla:
He intentado todo lo posible con CSS puro y estoy tratando de evitar el uso de JS si es posible, pero estoy dispuesto a aceptarlo si es la forma más limpia de hacerlo.
<div class="progress">
<div class="bar" style="width: 86%">517/600</div>
</div>
Para que funcione correctamente, sin importar cuánto tiempo tenga su texto, eche un vistazo aquí.
Tendrás que sacar el texto del div
Bootstrap 4.0.0 con clases de utilidad: (Gracias a MaPePeR por la adición)
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
Bootstrap 3:
Boostrap ahora admite texto dentro de un elemento span en la barra de progreso. HTML como se proporciona en el ejemplo de Bootstrap. (Tenga en cuenta que se elimina la clase sr-only )
HTML:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
</div>
... Sin embargo, solo centra el texto de acuerdo con la barra en sí, por lo que necesitamos un poco de CSS personalizado.
Pegue esto en otra hoja de estilo / debajo de donde cargue css de arranque:
CSS:
/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress span {
position: absolute;
display: block;
width: 100%;
color: black;
}
Archivo JsBin: http://jsbin.com/IBOwEPog/1/edit
Bootstrap 2:
Pegue esto en otra hoja de estilo / debajo de donde cargue css de arranque:
/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress .bar {
z-index: 1;
position: absolute;
}
.progress span {
position: absolute;
top: 0;
z-index: 2;
color: black; /* Change according to needs */
text-align: center;
width: 100%;
}
A continuación, agregue texto a una barra de progreso agregando un elemento span fuera de .bar:
<div class="progress">
<div class="bar" style="width: 50%"></div>
<span>Add your text here</span>
</div>