[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]
[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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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=”#2d66f7″ bar_border_color=”#2d66f7″ 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]