Progress Bars

[tm_textblock textarea_html_bkg_color=”#ffffff”]

Create elegant progress bars to show key information or data. Style them easily with a range of color, background, and border color classes.

[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”]


[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”]

Default Bars

[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Photoshop” percentage=”80″ measure=”%” hide_measure=”true” animate=”true” size=”medium” border_style=”” track_background_color=”#f4f4f4″ track_border_color=”#f4f4f4″ bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Illustrator” percentage=”40″ measure=”%” hide_measure=”true” animate=”true” size=”medium” border_style=”” track_background_color=”#f4f4f4″ track_border_color=”#f4f4f4″ bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”inDesign” percentage=”67″ measure=”%” hide_measure=”true” animate=”true” size=”medium” border_style=”” track_background_color=”#f4f4f4″ track_border_color=”#f4f4f4″ bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][/tm_textblock]
[tm_textblock textarea_html_bkg_color=”#ffffff”]

With Percentage

[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Photoshop” percentage=”80″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”” track_background_color=”#fff” track_border_color=”#fff” bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Illustrator” percentage=”40″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”” track_background_color=”#fff” track_border_color=”#fff” bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”inDesign” percentage=”67″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”” track_background_color=”#fff” track_border_color=”#fff” bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][/tm_textblock]
[tm_textblock textarea_html_bkg_color=”#ffffff”]

Rounded Bars

[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Photoshop” percentage=”80″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”rounded” track_background_color=”#f4f4f4″ track_border_color=”#f4f4f4″ bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Illustrator” percentage=”40″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”rounded” track_background_color=”#f4f4f4″ track_border_color=”#f4f4f4″ bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”inDesign” percentage=”67″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”rounded” track_background_color=”#f4f4f4″ track_border_color=”#f4f4f4″ bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][/tm_textblock]
[tm_textblock textarea_html_bkg_color=”#ffffff”]

Pill Bars

[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Photoshop” percentage=”80″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”pill” track_background_color=”#fff” track_border_color=”#fff” bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Illustrator” percentage=”40″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”pill” track_background_color=”#fff” track_border_color=”#fff” bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”inDesign” percentage=”67″ measure=”%” hide_measure=”false” animate=”true” size=”medium” border_style=”pill” track_background_color=”#fff” track_border_color=”#fff” bar_background_color=”#3fb58b” bar_border_color=”#3fb58b” text_color=”” el_id=”” el_class=””][/tm_textblock]
[tm_textblock textarea_html_bkg_color=”#ffffff”]

Customised Bars

[/tm_textblock]

[tm_textblock textarea_html_bkg_color=”#ffffff”][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Photoshop” percentage=”80″ measure=”/100″ hide_measure=”false” animate=”true” size=”medium” border_style=”pill” track_background_color=”#fafafa” track_border_color=”#fafafa” bar_background_color=”#f72d61″ bar_border_color=”#f72d61″ text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”Illustrator” percentage=”40″ measure=”” hide_measure=”false” animate=”true” size=”medium” border_style=”pill” track_background_color=”#eee” track_border_color=”#eee” bar_background_color=”#34e0a9″ bar_border_color=”#34e0a9″ text_color=”” el_id=”” el_class=””][tm_content_progress_bar margin_bottom=”30″ margin_bottom_mobile=”30″ label=”inDesign” percentage=”67″ measure=” percent” hide_measure=”false” animate=”true” size=”medium” border_style=”pill” track_background_color=”#eee” track_border_color=”#eee” bar_background_color=”#d623eb” bar_border_color=”#d623eb” text_color=”” el_id=”” el_class=””][/tm_textblock]