It can be used for showing anything using a percentage progress meter inside your posts, pages, widgets and even theme files etc. Awesome Progress Bar is the new WordPress plugin you can use for showing progress of your website, your products, you can compare things and more. The plugin provides you various shortcodes for adding progress bars in WordPress. See it live working here.
How To Use Awesome Progress Bar Plugin?
Install and activate Awesome Progress Bar plugin and then you can use the following shortcodes with your parameters:
Basic Progess Bar
[progressbar_basic width="99" text="99%" heading="Basic Progessbar" bg_color="green"]
Contextual Progeesbar
[contextual_info heading="this is heading" width="22" text="22"bg_color="#428BCA"]
[contextual_success heading="this is heading" width="33" text="33"bg_color="#428BCA"]
[contextual_warning heading="this is heading" width="44" text="44"bg_color="#428BCA"]
[contextual_danger heading="this is heading" width="55" text="55"bg_color="#428BCA"]
Stripped Progeesbar
[stripped_info heading="this is heading" width="22" text="22"bg_color="#428BCA"]
[stripped_success heading="this is heading" width="33" text="33"bg_color="#428BCA"]
[stripped_warning heading="this is heading" width="44" text="44"bg_color="#428BCA"]
[stripped_danger heading="this is heading" width="55" text="55"bg_color="#428BCA"]
Animation Progeesbar
[progressbar_animation heading="this is heading" width="55" text="55" bg_color="#428BCA"]
Multicolor Progessbar
[stacked_2color width1="11" width2="22" text1="11" text2="22" bg_color1="red" bg_color1="green" heading="fggf"]
[stacked_3color width1="11" width2="22" width3="33" text1="11" text2="22" text3="33" bg_color1="red" bg_color1="green" bg_color3="gray" heading="fggf"]
[stacked_4color width1="25" width2="25" width3="25" width4="25" text1="25" text2="25" text3="25" text4="25" bg_color1="red" bg_color1="green" bg_color3="gray" bg_color4="yellow" heading="fggf"]
[stacked_5color width1="20" width2="20" width3="20" width4="20" width5="20" text1="20" text2="20" text3="20" text4="20" text5="20" bg_color1="red" bg_color2="green" bg_color3="yellow" bg_color4="red" bg_color5="purple" heading="fggf"]
How To Use These Shortcodes Inside Theme Template Files?
You can use the progess bar inside your theme’s PHP files, Simply place <?php echo do_shortcode('YOUR_SHORTCODE'); ?> in your templates, replacing YOUR_SHORTCODE with progress bar shortcode which you like to show.