Shortcodes

[intense_progress]

[intense_progress_segment]

Description

Displays a progress bar on the page. Progress bars can have several different progress sections each with a different color and text.

Screenshots

progress

Dialog

To use the dialog:

  1. Select whether to animate the progress bar, the size, and if to show a gradient or not
  2. Press "add data" to add a progress section
  3. Select the color, value, and add applicable text
  4. Continue adding progress sections as needed. Combined values should not exceed 100.

progress

Attributes

intense_progress

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
colorsdeprecateduse intense_progress_segment shortcode instead
valuesdeprecateduse intense_progress_segment shortcode instead
textsdeprecateduse intense_progress_segment shortcode instead
animationcheckboxAnimated1 = true, 0 = false
animation_speedtextAnimation Tick Speedamount in milliseconds35
animate_textdeprecateduse intense_progress_segment shortcode instead
gradientcheckboxGradient1 = true, 0 = false
sizedropdownSizemediummini - mini
small - small
medium - medium
large - large
mega - mega
border_radiusborder_radiusBorder Radius%, em, px - examples: 25% or 10em or 20px
rtlhiddenright-to-left

intense_progress_segment

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
colorcolor_advancedColoroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
valuetextValue
texttextTextIf animated, {0} will be replaced with the percent (ex. My percent: {0}% -> My percent: 50%)

Examples

[intense_content_section]
<h2>Colors</h2>
[intense_progress animation="1"] 
[intense_progress_segment color="primary" value="14" text="primary"][/intense_progress_segment] 
[intense_progress_segment color="error" value="14" text="error"][/intense_progress_segment] 
[intense_progress_segment color="info" value="14" text="info"][/intense_progress_segment] 
[intense_progress_segment color="inverse" value="14" text="inverse"][/intense_progress_segment] 
[intense_progress_segment color="muted" value="15" text="muted"][/intense_progress_segment] 
[intense_progress_segment color="success" value="15" text="success"][/intense_progress_segment] 
[intense_progress_segment color="warning" value="14" text="warning"][/intense_progress_segment] 
[/intense_progress]

[intense_progress animation="1"]
[intense_progress_segment color="#999999" value="20" text="Unlimited color options!"][/intense_progress_segment]
[intense_progress_segment color="red" value="2"][/intense_progress_segment]
[intense_progress_segment color="orange" value="2"][/intense_progress_segment]
[intense_progress_segment color="yellow" value="2"][/intense_progress_segment]
[intense_progress_segment color="green" value="2"][/intense_progress_segment]
[intense_progress_segment color="blue" value="2"][/intense_progress_segment]
[intense_progress_segment color="indigo" value="2"][/intense_progress_segment]
[intense_progress_segment color="violet" value="2"][/intense_progress_segment]
[/intense_progress]

[/intense_content_section]

[intense_hr size="large"/]

[intense_content_section]

<h2>Gradient</h2>
[intense_progress animation="1" gradient="1"] 
[intense_progress_segment color="primary" value="14" text="primary"][/intense_progress_segment] 
[intense_progress_segment color="error" value="14" text="error"][/intense_progress_segment] 
[intense_progress_segment color="info" value="14" text="info"][/intense_progress_segment] 
[intense_progress_segment color="inverse" value="14" text="inverse"][/intense_progress_segment] 
[intense_progress_segment color="muted" value="15" text="muted"][/intense_progress_segment] 
[intense_progress_segment color="success" value="15" text="success"][/intense_progress_segment] 
[intense_progress_segment color="warning" value="14" text="warning"][/intense_progress_segment] 
[/intense_progress]
[/intense_content_section]

[intense_hr size="large"/]

[intense_content_section]

<h2>Sizes</h2>
[intense_progress size="mini"] [intense_progress_segment color="primary" value="35" text="mini"][/intense_progress_segment] [/intense_progress]
[intense_progress size="mall"] [intense_progress_segment color="primary" value="90" text="mini"][/intense_progress_segment] [/intense_progress]
[intense_progress size="medium"] [intense_progress_segment color="primary" value="20" text="mini"][/intense_progress_segment] [/intense_progress]
[intense_progress size="large"] [intense_progress_segment color="primary" value="40" text="mini"][/intense_progress_segment] [/intense_progress]
[intense_progress size="mega"] [intense_progress_segment color="primary" value="60" text="mini"][/intense_progress_segment] [/intense_progress] 
[/intense_content_section]

[intense_hr size="large"/]

[intense_content_section]

<h2>Without Animation</h2>
[intense_progress] [intense_progress_segment color="success" value="35" text="Title 1"][/intense_progress_segment] [intense_progress_segment color="warning" value="20" text="Title 2"][/intense_progress_segment] [intense_progress_segment color="primary" value="10" text="Title 3"][/intense_progress_segment] [/intense_progress]
[intense_progress] [intense_progress_segment color="info" value="20"][/intense_progress_segment] [/intense_progress]
[intense_progress] [intense_progress_segment color="success" value="60" text="Your Title: 60%"][/intense_progress_segment] [/intense_progress]
[/intense_content_section]

[intense_hr size="large"/]

[intense_content_section]

<h2>With Animation</h2>
[intense_progress animation="1"] [intense_progress_segment color="success" value="35" text="Title 1"][/intense_progress_segment] [intense_progress_segment color="warning" value="20" text="Title 2"][/intense_progress_segment] [intense_progress_segment color="primary" value="10" text="Title 3"][/intense_progress_segment] [/intense_progress]
[intense_progress animation="1"] [intense_progress_segment color="info" value="20"][/intense_progress_segment] [/intense_progress]
[intense_progress animation="1"] [intense_progress_segment color="success" value="60" text="Your Title: {0}%"][/intense_progress_segment] [/intense_progress]
[/intense_content_section]