Shortcode della barra di avanzamento

2 Stili alternativi

  • Solid Style
    33
    Solid Style
    66
    Solid Style
    100
  • Simple Style
    33
    Simple Style
    66
    Simple Style
    100
Ottieni il codice

[progress_bar value="33" icon="eye-open" style="solid" size="small"]Solid Style[/progress_bar]
[progress_bar value="66" icon="eye-open" style="solid" size="medium"]Solid Style[/progress_bar]
[progress_bar value="100" icon="eye-open" style="solid" size="big"]Solid Style[/progress_bar]

[progress_bar value="33" icon="eye-open" style="simple" size="small"]Simple Style[/progress_bar]
[progress_bar value="66" icon="eye-open" style="simple" size="medium"]Simple Style[/progress_bar]
[progress_bar value="100" icon="eye-open" style="simple" size="big"]Simple Style[/progress_bar]

3 Different Sizes

Small
33
Medium
66
Big
100
Ottieni il codice

[progress_bar value="33" icon="eye-open" size="small" style="simple"]Small[/progress_bar]
[progress_bar value="66" icon="eye-open" size="medium" style="simple"]Medium[/progress_bar]
[progress_bar value="100" icon="eye-open" size="big" style="simple"]Big[/progress_bar]

2 Alternative Directions

  • Left Direction
    80
    Left Direction
    60
    Left Direction
    40
  • Right Direction
    80
    Right Direction
    60
    Right Direction
    40
Ottieni il codice

[one_half]

[progress_bar value="80" icon="code" direction="left" size="medium"]Left Direction[/progress_bar]

[progress_bar value="60" icon="code" direction="left" size="medium"]Left Direction[/progress_bar]

[progress_bar value="40" icon="code" direction="left" size="medium"]Left Direction[/progress_bar]

[/one_half]

[one_half_last]

[progress_bar value="80" icon="pencil" size="medium" style="simple"]Right Direction[/progress_bar]

[progress_bar value="60" icon="pencil" size="medium" style="simple"]Right Direction[/progress_bar]

[progress_bar value="40" icon="pencil" size="medium" style="simple"]Right Direction[/progress_bar]

[/one_half_last]

Use With Columns

  • Your Satisfaction
    100

    Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

  • Our Satisfaction
    100

    Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

Ottieni il codice

[one_half]

[progress_bar value="100" icon="circle-arrow-right" size="medium" style="simple"]Your Satisfaction[/progress_bar]

<p style="text-align:right;">Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

[/one_half]

[one_half_last]

[progress_bar value="100" icon="circle-arrow-left" direction="left" size="medium" style="simple"]Our Satisfaction[/progress_bar]

Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

[/one_half_last]

Custom Colors

  • 38
  • 54
  • 83
Ottieni il codice

[progress_bar value="38" icon="pencil" text_color="#ffffff" bg_color="#9b59b6" size="medium" style="solid"]
[progress_bar value="54" icon="hand-right" text_color="#ffffff" bg_color="#00c6ff" size="medium" style="solid"]
[progress_bar value="83" icon="fighter-jet" text_color="#ffffff" bg_color="#00b976" size="medium" style="solid"]

Tutte le icone disponibili

Shortcode documentation

  • ID
    L'attributo id specifica un id per un elemento HTML.
    Deve essere univoco all'interno del documento HTML.
    (Principalmente per scopi di stile/script aggiuntivi)
  • classe
    L'attributo class specifica un nome di classe per un elemento HTML.
    (Principalmente per scopi di stile/script aggiuntivi)
  • value
    0-100 range
  • direction
    Opzioni disponibili:
    • right
    • left
  • icona
    Opzioni disponibili:
    Tutte le icone disponibili su Carattere fantastico posto
  • stile
    Opzioni disponibili:
    • semplice
    • solid
  • size
    Opzioni disponibili:
    • small
    • medium
    • big
  • text_color
  • bg_color