css - span - descargar bootstrap 3

¿Es posible representar una barra de progreso indeterminada con Twitter Bootstrap?

Question

¿Es posible representar una barra de progreso indeterminada con Twitter Bootstrap (v2 o v3) usando alguna funcionalidad incorporada o un complemento de terceros? Trato de buscarlo en google, pero sin suerte.

Ejemplo de lo que quiero lograr:

Answer 1

En bootstrap 2 :

<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>

En bootstrap 3 :

<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>

En bootstrap 4 :

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>

Answer 2

Esto es lo que haría para obtener una barra de progreso indeterminada:

• Usa una barra de progreso animada y a rayas.
• Ponlo al 100%
• Personaliza la velocidad de la animación.
• Agregue un texto como "espere" para informar al usuario que algo se está procesando.
• Agregue puntos suspensivos ( ... ), usando la propiedad de contenido css
• Animar los puntos suspensivos utilizando CSS en los navegadores que admiten esto

Demostración:

.progress {
margin: 15px;
}
.progress .progress-bar.active {
font-weight: 700;
animation: progress-bar-stripes .5s linear infinite;
}
.dotdotdot:after {
font-weight: 300;
content: ''...'';
display: inline-block;
width: 20px;
text-align: left;
animation: dotdotdot 1.5s linear infinite;
}
@keyframes dotdotdot {
0% { content: ''...''; }
25% { content: ''''; }
50% { content: ''.''; }
75% { content: ''..''; }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span>Please wait<span class="dotdotdot"></span></span>
</div>
</div>

(ver también este violín )

Answer 3

No es bonito, pero hace el trabajo:

HTML:

<div class="progress" style="position: relative;">
<div class="progress-bar progress-bar-striped active" style="position: relative; left: -180px; width: 180px">
</div>

Javascript:

setInterval(function() {
var progress_width = $(''.progress'').width();
var $progress_bar = $(''.progress-bar'');
$progress_bar.css(''left'', ''+=3'');
var progress_bar_left = parseFloat($progress_bar.css(''left'')+'''');
if (progress_bar_left >= progress_width)
$progress_bar.css(''left'', ''-200px'');
}, 20);

Siéntase libre de optimizar un poco sus selectores jQuery ;-)

Aquí hay una versión de trabajo:

https://jsbin.com/copejaludu/edit?html,js,output

Answer 4

Si quieres una solución solo para CSS, aquí tienes:

HTML:

<div class="progress" style="position: relative;">
<div class="progress-bar progress-bar-striped indeterminate">
</div>

CSS:

.progress-bar.indeterminate {
position: relative;
animation: progress-indeterminate 3s linear infinite;
}
@keyframes progress-indeterminate {
from { left: -25%; width: 25%; }
to { left: 100%; width: 25%;}
}

Aquí hay una versión de trabajo:

https://jsbin.com/dewikogujo/edit?html,css,output

Answer 5

Viejo tema ... pero tenía que hacer esto hoy. Esto es lo que hice.

Primero, usé la clase de diálogo Bootstrap como se encuentra here .

Fragmento de HTML

<div id="progressDiv" class="progress">
<div class="progress-bar progress-bar-striped active"
role="progressbar"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
style="width: 100%">
</div>
</div>

JavaScript

var progress = $("#progressDiv").html();
BootstrapDialog.show(
{
title: "Please wait...",
message: progress
});

El cuadro de diálogo resultante es: (Tenga en cuenta que la barra de progreso está animada)

Esto abre un diálogo modal que muestra una barra animada.