Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

MDW WordPress Tutorial Progress Bars

Progress Bar

Written by Michał Krawczyk ,

In the world we're living in - time is money. We don't want to waste it, so everything has to happen fast and rapid. However, we all know, that from time to time, some actions take time and users need to go through some stages before reach the final point. Therefore, we present you progress bars, which will show users what is going on and approximately how long it will take

Basic example

0% 25% 50% 75% 100%


Contextual Alternatives

Progress bars use some of the same button and alert classes for consistent styles.

25% 50% 75% 100%

[bar color="success"]25%[/bar]
[bar color="info"]50%[/bar]
[bar color="warning"]75%[/bar]
[bar color="danger"]100%[/bar]


It is recommended to paste the copied code into the "Text" area. Otherwise, the shortcode may not work properly. If you copy the code into "Visual" area, it may contain additional operators, which might break the progress bar.

Do you want to share?

About author

User avatar

Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research background, student of Interfaculty Individual Studies in the Humanities at the Jagiellonian University

Leave a reply

Card image cap

Stay up to date

Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.