Progress Shortcode

[intense_content_section]
<h2>Introduction</h2>
Add progress bars using the progress bar shortcode. Choose unlimited colors for each individual progress segment. Animate the segment and/or text. Choose from five different sizes. Add a gradient or round the corners.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Styling</h2>
<h3>Colors</h3>
Choose unlimited colors for each segment of the progress bar shortcode.
[intense_progress]
[intense_progress_segment color="#F00" value="14"][/intense_progress_segment]
[intense_progress_segment color="#FFA500" value="14"][/intense_progress_segment]
[intense_progress_segment color="#FF0" value="14"][/intense_progress_segment]
[intense_progress_segment color="#008000" value="14"][/intense_progress_segment]
[intense_progress_segment color="#00F" value="14"][/intense_progress_segment]
[intense_progress_segment color="#4B0082" value="14"][/intense_progress_segment]
[intense_progress_segment color="#EE82EE" value="14"][/intense_progress_segment]
[/intense_progress]
<h3>Border Radius</h3>
Round the corners of the progress bar.
[intense_progress border_radius="30px"]
[intense_progress_segment color="error" value="20"][/intense_progress_segment]
[intense_progress_segment color="inverse" value="80"][/intense_progress_segment]
[/intense_progress]
<h3>Gradient</h3>
Add a gradient.
[intense_progress gradient="1"]
[intense_progress_segment color="success" value="25"][/intense_progress_segment]
[intense_progress_segment color="primary" value="25"][/intense_progress_segment]
[intense_progress_segment color="error" value="25"][/intense_progress_segment]
[intense_progress_segment color="warning" value="25"][/intense_progress_segment]
[/intense_progress]
[/intense_content_section]
[intense_content_section]
<h2>Sizes</h2>
Choose from five predefined sizes.
[intense_progress size="mini"]
[intense_progress_segment color="primary" value="20" text="mini"][/intense_progress_segment]
[/intense_progress]
[intense_progress size="small"]
[intense_progress_segment color="primary" value="40" text="small"][/intense_progress_segment]
[/intense_progress]
[intense_progress size="medium"]
[intense_progress_segment color="primary" value="60" text="medium (default)"][/intense_progress_segment]
[/intense_progress]
[intense_progress size="large"]
[intense_progress_segment color="primary" value="80" text="large"][/intense_progress_segment]
[/intense_progress]
[intense_progress size="mega"]
[intense_progress_segment color="primary" value="100" text="mega"][/intense_progress_segment]
[/intense_progress]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Animations</h2>
Animate the segments and text when the progress bar shortcode becomes visible.
[intense_progress animation="1" size="small" border_radius="30px"]
[intense_progress_segment color="primary" value="25" text="Animated: {0}%"][/intense_progress_segment]
[intense_progress_segment color="success" value="25" text="{0}%"][/intense_progress_segment]
[intense_progress_segment color="warning" value="25" text="{0}%"][/intense_progress_segment]
[intense_progress_segment color="info" value="25" text="{0}%"][/intense_progress_segment]
[/intense_progress]
[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]