Progress Bar Short

2 Alternative Styles

  • Solid Style
    33
    Solid Style
    66
    Solid Style
    100
  • Simple Style
    33
    Simple Style
    66
    Simple Style
    100
Hier den Code

[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
Hier den Code

[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
Hier den Code

[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. Kleber. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

  • Our Satisfaction
    100

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

Hier den Code

[one_half]

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

<p style="text-align:richtig;">Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Kleber. 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. Kleber. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

[/one_half_last]

Custom Colors

  • 38
  • 54
  • 83
Hier den Code

[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"]

All Available Icons

Short Dokumentation

  • Ich würde
    Das id-Attribut gibt eine ID für ein HTML-Element.
    Es muss innerhalb des HTML-Dokuments eindeutig sein.
    (Vor allem für zusätzliche Styling / scripting Zwecke)
  • Klasse
    Die Klasse Attribut gibt einen Klassennamen für ein HTML-Element.
    (Vor allem für zusätzliche Styling / scripting Zwecke)
  • value
    0-100 range
  • Richtung
    Verfügbare Optionen:
    • richtig
    • links
  • Symbol
    Verfügbare Optionen:
    Alle Symbole auf Schrift ehrfürchtig Seite? ˅
  • Stil
    Verfügbare Optionen:
    • einfach
    • solide
  • size
    Verfügbare Optionen:
    • small
    • medium
    • big
  • text_color
  • bg_color