Progress Bar

Descripción

Conjunto de shortcodes que permite crear Barras de Progreso y mostrarlas de varias maneras, entrelazadas, fondos animados, etiquetadas, etc… De apertura y cierre, permite otros shortcodes.

Uso

[progress height=""][progress-bar percent="" style="" striped="false" animated="false"][/progress-bar][/progress]

Parámetros

Shorcode [progress]

  • height: Opcional. Altura en píxeles de la barra.

Shortcode [progress-bar]

  • percent: Opcional. Ancho de la barra de progreso. Valor predeterminado 0.
  • style: Opcional. Estilo de fondo. Posibles valores: success, info, warning, danger o un valor personalizado.
  • striped: Opcional. Aplicará franjas a la barra. Posibles valores: true o false. Valor predeterminado false.
  • animated: Opcional. Si striped es evaluado como true, mostrará las franjas animadas. Posibles valores: true o false. Valor predeterminado false.

Ejemplos

percent="n"

[progress]
[progress-bar percent="0"][/progress-bar]
[/progress]
[progress]
[progress-bar percent="50"][/progress-bar]
[/progress]
[progress]
[progress-bar percent="100"][/progress-bar]
[/progress]

 

 

height="n"

[progress height="1"]
[progress-bar percent="50"][/progress-bar]
[/progress]
[progress height="20"]
[progress-bar percent="50"][/progress-bar]
[/progress]

 

style=""

[progress]
[progress-bar percent="25" style="success"][/progress-bar]
[/progress]
[progress]
[progress-bar percent="50" style="info"][/progress-bar]
[/progress]
[progress]
[progress-bar percent="75" style="warning"][/progress-bar]
[/progress]
[progress]
[progress-bar percent="100" style="danger"][/progress-bar]
[/progress]

 

 

 

striped="true"

[progress]
[progress-bar percent="100" striped="true"][/progress-bar]
[/progress]

animated="true"

[progress]
[progress-bar percent="100" striped="true" animated="true"][/progress-bar]
[/progress]

Múltiples barras

[progress]
[progress-bar percent="25" style="success"][/progress-bar]
[progress-bar percent="35" style="info"][/progress-bar]
[progress-bar percent="15" style="warning"][/progress-bar]
[progress-bar percent="10" style="danger"][/progress-bar]
[/progress]

Notas

Puedes agregar textos a tus [progress-bar][/progress-bar]

[progress]
[progress-bar percent="75"]75%[/progress-bar]
[/progress]
75%