This feature is available only for Premium members

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

Description and Code

 

The Progress Bar shortcode will show attractive, animated bars that mark your progress on something. You can choose the colors for your bars, animations etc. Here's an example of the shortcode in code view:

[progressbar_component percentage="1" unit="" height="" filled_color="" filled_color_2="" unfilled_color="" striped="no" display_text="yes" animated_stripes="no" text_color="" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]Text[/progressbar_component]

 

Parameters

  • percentage
    • sets the percentage of filled area of the progress bar
    • Possible values - numbers like 10, 50, 100 etc.
  • unit
    • defines the unit which is shown in the text, if enabled
    • Possible values - %, $ etc.
  • height
    • controls the height of the progress bar
    • Possible values - number with an unit like 10px, 2rem etc.
  • filled_color
    • defines the filled area color of the progress bar
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • filled_color_2
    • defines the filled area color 2 of the progress bar, creates gradient effect
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • unfilled_color
    • defines the unfilled area color of the progress bar
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • striped
    • enables stripes effect in the progress bar
    • Possible values - yes or no
  • display_text
    • enables/disables text in the progress bar, if text is defined
    • Possible values - yes or no
  • animated_stripes
    • enables/disables stripes animation, if stripes are enabled
    • Possible values - yes or no
  • text_color
    • controls the text color, if text is defined
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • animation_type
    • set the animation direction of the component
    • Possible values - down, left, right, up
  • animation_speed
    • set the animation speed of the component
    • Possible values - in seconds like 0.1, 1, 5.3 etc.
  • class
    • custom class for CSS of component
    • Possible values - string - like custom-element-class
  • id
    • custom ID for CSS of component
    • Possible values - string - like custom-element-id

 

Basic Examples

 

Text 30%
Text 60%
Text 90%
Text 50%
Text 75%

 

Animated Examples

 

Text 30%
Text 60%
Text 90%
Text 50%
Text 75%