Element – Progress Bars

[vc_row][vc_column][sh_header size=”h4″ header=”Progress Bars” colorchange=”enable” color=”#555555″ barwidth=”50px” barcolor=”#e74c3c”]

Use them to show progress, skills or anything you like

[/sh_header][vc_row_inner][vc_column_inner width=”1/2″][sh_pullquote side=”center”]

Progress bars (or skill bars) give you the choice to show progress or percents in a visually appealing way. Credence gives you many choices with progress bars.

[/sh_pullquote][/vc_column_inner][vc_column_inner width=”1/2″][sh_progress barcolor=”#2ecc71″ textcolor=”#555555″ background=”rgba(46,204,113,0.16)” padding=”10px” text=”Buyers that love Credence” percent=”98″][sh_progress style=”striped” barcolor=”#dd3939″ textcolor=”#ffffff” background=”rgba(221,59,59,0.15)” padding=”10px” text=”Buyers that love Credence” percent=”98″][sh_progress style=”pulse” barcolor=”#1e73be” textcolor=”#ffffff” background=”rgba(30,115,190,0.15)” padding=”10px” text=”Buyers that love Credence” percent=”98″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][sh_headerdouble size=”h5″]

Choose any bar, text or background color

[/sh_headerdouble][vc_empty_space][sh_progress barcolor=”#2980b9″ textcolor=”#ffffff” padding=”10px” text=”Work Completed” percent=”56″][sh_progress barcolor=”#f1c40f” textcolor=”#555555″ background=”rgba(241,196,15,0.42)” padding=”10px” text=”Work Completed” percent=”81″][sh_progress barcolor=”#16a085″ textcolor=”#4c4c4c” background=”rgba(22,160,133,0.13)” padding=”10px” text=”Work Completed” percent=”78″][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][sh_headerdouble size=”h5″]

Make them wide and thin

[/sh_headerdouble][vc_empty_space][sh_progress barcolor=”#34495e” textcolor=”#ffffff” background=”rgba(52,73,94,0.31)” padding=”5px” text=”Work Completed” percent=”56″][sh_progress barcolor=”#f39c12″ textcolor=”#e2e2e2″ background=”rgba(243,156,18,0.3)” padding=”10px” text=”Work Completed” percent=”81″][sh_progress barcolor=”#34495e” textcolor=”#ffffff” background=”rgba(52,73,94,0.16)” padding=”15px” text=”Work Completed” percent=”78″][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][sh_headerdouble size=”h5″]

Make them Striped and Pulse

[/sh_headerdouble][vc_empty_space][sh_progress style=”striped” barcolor=”#34495e” textcolor=”#ffffff” background=”rgba(52,73,94,0.31)” padding=”5px” text=”Work Completed” percent=”56″][sh_progress style=”striped” barcolor=”#f39c12″ textcolor=”#e2e2e2″ background=”rgba(243,156,18,0.3)” padding=”10px” text=”Work Completed” percent=”81″][sh_progress style=”pulse” barcolor=”#34495e” textcolor=”#ffffff” background=”rgba(52,73,94,0.16)” padding=”15px” text=”Work Completed” percent=”78″][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][sh_headerdouble size=”h5″]

Options

[/sh_headerdouble][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][shvc_checklist background=”enable” icon=”fa fa-check”][shvc_checklist_item]

Create with Shortcode Generator or Visual Composer

[/shvc_checklist_item][shvc_checklist_item]

Set any color font, bar, and background

[/shvc_checklist_item][shvc_checklist_item]

Set your own padding for bar height

[/shvc_checklist_item][shvc_checklist_item]

Choose from Solid, Striped, and Pulse style Bars

[/shvc_checklist_item][/shvc_checklist][/vc_column][vc_column width=”1/2″][shvc_checklist background=”enable” icon=”fa fa-check”][shvc_checklist_item]

Use any symbol (or text) instead of the percent

[/shvc_checklist_item][shvc_checklist_item]

Progress bars are responsive

[/shvc_checklist_item][/shvc_checklist][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][sh_divider style=”double” totop=”enable”][vc_empty_space height=”60px”][/vc_column][/vc_row]