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.

Unlimited possibilites

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″]

Play with the colors, size and content

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_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 Will Definitely Make
Your Life Easier

[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”]