Seven SERP Theme|Centro de ayuda

Barras de progreso

Seven SERP

El shortcode [progress] nos permitirá añadir barras de progreso en nuestros artículos, páginas... Funciona a partir de la version 0.83 y los shortcodes que verás aquí están generados con Seven SERP Theme directamente. Su uso es muy simple, vamos a verlo con algunos ejemplos:

Ejemplos de uso

Crear una barra de porcentajes básica:


Shortcode utilizado: [progress percentage="85"]

 

Crear una barra de porcentajes definiendo la altura:


Shortcode utilizado: [progress percentage="50" height="10"]

 

Crear una barra de porcentajes con líneas:


Shortcode utilizado: [progress percentage="10" height="25" striped="1"]

 

Crear una barra de porcentajes con animación:


Shortcode utilizado: [progress percentage="10" height="25" striped="1" animated="1"]

 

Crear una barra de porcentajes donde aparezca el porcentaje en texto:

18%

Shortcode utilizado: [progress percentage="18" height="25" striped="1" text="1"]

 

Cambiar el color del fondo:

36%

Shortcode utilizado: [progress percentage="36" height="10" text="1" background="danger"]

 

Cambiar el color del fondo:


Shortcode utilizado: [progress percentage="45" height="10" striped="1" background="success"]

 

Cambiar el color del fondo:


Shortcode utilizado: [progress percentage="50" height="15" background="warning"]

 

Atributos

Los atributos permitidos para este shortcode son los siguientes, se pueden combinar como queramos. El único obligatorio es 'percentage'.

  • percentage: Define el porcentaje de nuestra barra. Entre 0 y 100. Obligatorio para que aparezca la barra.
  • height: Define la altura. Entre 10 y 50. Por defecto será 20.
  • striped: Añade líneas en nuestra barra de progreso. Su único valor permitido 1.
  • animated: Otorga animación a las líneas de la barra. Sólo funcionará si el valor striped está añadido. Su único valor permitido es 1.
  • text: Muestra el porcentaje en formato de texto. Su único valor permitido es 1 (para mostrar el texto).
  • background: Permite cambiar el color de la barra de progreso. Los valores permitidos son: 'success' (verde), 'info' (azul), 'danger' (rojo), 'warning' (amarillo). El valor por defecto es 'info'.