Circular progress bars

The circular progress bars provide you with a beautiful and visually-compelling way to display a single statistic. As you scroll down, circle graph fills to the percentage based location.

With the circular progress bar you can modify everything, the bar color, use a gradient if you want, change the content, use icon for example, you can also modify the size of every part of the element. We will show some example below.

[cesis_circular_progress_bar percentage="75" bar_color="#69d2e7" track_color="#f4f4f4" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar bar_color="#69d2e7" track_color="#f4f4f4" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="70" bar_color="#69d2e7" track_color="#f4f4f4" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="90" bar_color="#69d2e7" track_color="#f4f4f4" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" canvas_size="220" bar_size="10" track_size="4" bar_color="#69d2e7" track_color="rgba(0,0,0,0.6)" content_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600" number_color=""]

[cesis_circular_progress_bar canvas_size="220" bar_size="10" track_size="4" bar_color="#69d2e7" track_color="rgba(0,0,0,0.6)" content_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600" number_color=""]

[cesis_circular_progress_bar percentage="70" canvas_size="220" bar_size="10" track_size="4" bar_color="#69d2e7" track_color="rgba(0,0,0,0.6)" content_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600" number_color=""]

[cesis_circular_progress_bar percentage="90" canvas_size="220" bar_size="10" track_size="4" bar_color="#69d2e7" track_color="rgba(0,0,0,0.6)" content_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600" number_color=""]

[cesis_circular_progress_bar percentage="75" canvas_size="200" bar_size="6" track_size="14" linecap="round" bar_color="#69d2e7" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar canvas_size="200" bar_size="6" track_size="14" linecap="round" bar_color="#69d2e7" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="70" canvas_size="200" bar_size="6" track_size="14" linecap="round" bar_color="#69d2e7" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="90" canvas_size="200" bar_size="6" track_size="14" linecap="round" bar_color="#69d2e7" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" bar_size="10" linecap="round" bar_color="#69d2e7" bar_alt_color="#0da0de" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar bar_size="10" linecap="round" bar_color="#6981e7" bar_alt_color="#57e0fd" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="70" bar_size="10" linecap="round" bar_color="#69d2e7" bar_alt_color="#bdfb74" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="90" bar_size="10" linecap="round" bar_color="#bdfb74" bar_alt_color="#81d742" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" canvas_size="160" bar_size="6" track_size="14" linecap="round" content_type="text" custom_text="We" bar_color="#dd3333" bar_alt_color="#f47038" track_color="#f4f4f4" text_font="alt_font" text_f_weight="600"]

[cesis_circular_progress_bar percentage="95" canvas_size="260" track_size="16" content_type="icon" i_size="35" use_gradient="yes" use_shape="yes" i_bg_size="90" bar_color="#dd3333" bar_alt_color="#f47038" track_color="#f4f4f4" icon_color="#ffffff" icon_bg_color="#dd3333" icon_alt_bg_color="#f47038" h_icon_color="#ffffff" h_icon_bg_color="#dd3333" h_icon_alt_bg_color="#f47038" icon="fa-heart3"]

[cesis_circular_progress_bar percentage="70" canvas_size="160" bar_size="6" track_size="14" linecap="round" content_type="text" custom_text="Cesis" bar_color="#dd3333" bar_alt_color="#f47038" track_color="#f4f4f4" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" bar_size="10" speed="12" content_type="text" custom_text="Use" bar_color="#69d2e7" bar_alt_color="#0da0de" track_color="#ffffff" text_font="alt_font" text_f_size="16px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" bar_size="10" content_type="text" custom_text="Custom" bar_color="#69d2e7" bar_alt_color="#0da0de" track_color="#ffffff" text_font="alt_font" text_f_size="16px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" bar_size="10" speed="8" content_type="text" custom_text="Fill" bar_color="#69d2e7" bar_alt_color="#0da0de" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_circular_progress_bar percentage="75" bar_size="10" speed="6" content_type="text" custom_text="Speed" bar_color="#69d2e7" bar_alt_color="#0da0de" track_color="#ffffff" text_font="alt_font" text_f_size="22px" text_f_weight="600"]

[cesis_button button_text="Purchase Cesis" link="https://themeforest.net/item/cesis-responsive-multipurpose-wordpress-theme/21736436?ref=tranmautritam" target="_blank" button_pos="center" button_size="cesis_button_custom" button_width="160px" button_height="48px" button_border="1" button_radius="4" css_animation="fadeInUp" delay="200" button_text_color="#ffffff" button_bg_color="rgba(255,255,255,0.01)" button_border_color="#ffffff" h_button_text_color="#ffffff" h_button_bg_color="#1d222b" h_button_border_color="#1d222b" button_f_size="15px" button_f_weight="500" button_t_transform="none"]