Progress bars are a nice and effective way to display stats to your visitors. Animation is triggered using lazy-loading to make browsing the page truly engaging.

The progress bar are classed in three main category, title in bar, thin bar or thick bar, we will show you some example of each style, if you come from the module link to check the shortcode, the first block will be style one, the second one style two etc..

[cesis_progress_bar values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%5D"]
[cesis_progress_bar style="cesis_pb_2" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%5D" options="striped,animated"]
[cesis_progress_bar style="cesis_pb_3" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%231e73be%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%231e73be%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%231e73be%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%231e73be%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.3)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%5D" space="20"]

If needed you can change the space between each progress bar, you can also change the colors, make a gradient effect, make the line move and if needed you can even change the units

[cesis_progress_bar style="cesis_pb_4" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%22105%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%22110%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%5D" units=" points" space="13"]
[cesis_progress_bar style="cesis_pb_5" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%5D"]
[cesis_progress_bar style="cesis_pb_6" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.2)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%5D" space="15"]
[cesis_progress_bar style="cesis_pb_7" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22ctn_b_color%22%3A%22rgba(0%2C0%2C0%2C0.9)%22%2C%22txtcolor%22%3A%22%23ffffff%22%7D%5D"]
[cesis_progress_bar style="cesis_pb_8" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%5D" space="13"]

If needed you can change the space between each progress bar, you can also change the colors, make a gradient effect, make the line move and if needed you can even change the units

[cesis_progress_bar style="cesis_pb_9" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%230da0de%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%5D" space="30" options="striped,animated"]
[cesis_progress_bar style="cesis_pb_10" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23ffffff%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%5D"]
[cesis_progress_bar style="cesis_pb_11" values="%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%2C%7B%22label%22%3A%22WordPress%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22%2369d2e7%22%2C%22color_two%22%3A%22%2369d2e7%22%2C%22ctn_color%22%3A%22%23f4f4f4%22%2C%22ctn_b_color%22%3A%22%23e7e7e7%22%2C%22txtcolor%22%3A%22%23333333%22%7D%5D"]
[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"]