{"id":5481,"date":"2021-12-08T01:00:00","date_gmt":"2021-12-08T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/progress-bar-css\/"},"modified":"2024-02-08T00:35:00","modified_gmt":"2024-02-07T23:35:00","slug":"progress-bar-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/progress-bar-css\/","title":{"rendered":"20 Amazing CSS Progress Bars [With Examples]"},"content":{"rendered":"\n<p>Whether you are uploading or downloading something, or even waiting for some progress to complete, it is good practice to let your users know what is going on with a <strong>CSS progress bar animation.<\/strong><\/p>\n\n\n\n<p>No one likes a frozen page while something in the background is happening. Progress feedback is so important for the user experience. Especially on the web, as some users will simply click away if they think your page is broken.<\/p>\n\n\n\n<p>A CSS progress bar is a great way to let a user know what is going on and how long something is taking. These progress bars need to be real-time and updated without any freezing or lagging, otherwise, that might deter users away from poor performance.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-12-08\/0.jpeg\" alt=\"XXXXXXXXXXX\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-might-you-use-a-progress-bar-for%3F\">What Might You Use A Progress Bar For?<\/h2>\n\n\n\n<p>There are a few different situations where a <strong>CSS loading bar<\/strong> might be useful, the general purpose is to give the user feedback and keep them updated.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>File Upload:<\/strong> As on YouTube when you upload a video file, it will give you feedback on how long it will take to upload and where it is from 0% to 100%. This keeps the user informed.<\/li>\n\n\n\n<li><strong>File Download:<\/strong> When you download a file from the internet, it is great to understand how much is downloaded and how long it will take, giving the user real-time feedback.<\/li>\n\n\n\n<li><strong>Metrics:<\/strong> Another usage for progress bars is displaying metrics. You might want to display the number of email invites that have been accepted in a progress bar. This helps visualize data.<\/li>\n\n\n\n<li><strong>Installs or Updates:<\/strong> It is good to indicate how long an install or update will take. Background processes are not exactly visible to the user so you have to let them know what is going on.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"20-amazing-css-progress-bar-examples\">20 Amazing CSS Progress Bar Examples<\/h2>\n\n\n\n<p>I\u2019ve prepared some great <strong>HTML &amp; CSS progress bar examples<\/strong>. They are easy to use and quick to integrate into your website. Hopefully, they inspire you to get started and maybe select the one you like most and use it. However, if you are feeling up to it and want to make your own, check out our article on <a href=\"https:\/\/alvarotrigo.com\/blog\/how-to-make-a-progress-bar-in-css\/\">How to Create Your Own Progress Bar<\/a> with CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1.-swiper-progress-bar\">1. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/gOGaovd\" target=\"_blank\" rel=\"noopener nofollow\">Swiper Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOGaovd\" data-src=\"\/\/codepen.io\/anon\/embed\/gOGaovd?height=450&amp;theme-id=1&amp;slug-hash=gOGaovd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOGaovd\" title=\"CodePen Embed gOGaovd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/gOGaovd\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are using Swiper (one of the top <a href=\"https:\/\/alvarotrigo.com\/blog\/jquery-carousel\/\">jQuery carousels<\/a>), you can use this full-width progress bar for it.<\/p>\n\n\n\n<p>It indicates the viewer when the auto scrolling will take place. Very common in <a href=\"https:\/\/alvarotrigo.com\/blog\/hero-slider\/\">hero slider designs<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you are into full-screen designs, check out <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a> It allows you to create full page scrollable web pages that slide.  Also available for WordPress for <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-elementor\/\">Elementor<\/a> and <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-gutenberg\/\">Gutenberg<\/a> builders.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2.-simple-css-loading-bar-component\">2. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/dyVYJmJ\" target=\"_blank\" rel=\"noopener nofollow\">Simple CSS Loading Bar Component<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyVYJmJ\" data-src=\"\/\/codepen.io\/anon\/embed\/dyVYJmJ?height=450&amp;theme-id=1&amp;slug-hash=dyVYJmJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyVYJmJ\" title=\"CodePen Embed dyVYJmJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/dyVYJmJ\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A simple and effective example of a progress bar and how it might look on a nice background. It doesn&#8217;t use external dependencies and provides an easy to use JavaScript API.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3.-on-scroll-progress-bar\">3. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/LYzpemz\" target=\"_blank\" rel=\"noopener nofollow\">On Scroll Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYzpemz\" data-src=\"\/\/codepen.io\/anon\/embed\/LYzpemz?height=450&amp;theme-id=1&amp;slug-hash=LYzpemz&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYzpemz\" title=\"CodePen Embed LYzpemz\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/LYzpemz\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>This CSS progress bar animation will work great for blog posts or long-form articles, showing the user how far they are on the page.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>You can check our post on <a href=\"https:\/\/alvarotrigo.com\/blog\/css-animations-scroll\/\">how to create CSS animations on scroll<\/a> to understand better the fundamentals of this CSS progress bar animation.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4.-colour-changing-upload-progress-bar\">4. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vYeNpjj\" target=\"_blank\" rel=\"noopener nofollow\">Colour Changing Upload Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYeNpjj\" data-src=\"\/\/codepen.io\/anon\/embed\/vYeNpjj?height=450&amp;theme-id=1&amp;slug-hash=vYeNpjj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYeNpjj\" title=\"CodePen Embed vYeNpjj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vYeNpjj\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A good example of a simple but modern-looking upload CSS progress bar. It changes color as well depending on its progress.<\/p>\n\n\n\n<p>This example uses GSAP component from <a href=\"https:\/\/greensock.com\/gsap\/\" target=\"_blank\" rel=\"noopener nofollow\">GreenStock<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5.-circular-progress-bars-(pure-css)\">5. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/VwMvydQ\" target=\"_blank\" rel=\"noopener nofollow\">Circular Progress Bars<\/a> (Pure CSS)<\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwMvydQ\" data-src=\"\/\/codepen.io\/anon\/embed\/VwMvydQ?height=450&amp;theme-id=1&amp;slug-hash=VwMvydQ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwMvydQ\" title=\"CodePen Embed VwMvydQ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/VwMvydQ\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are looking for a circular kind of progress bar, these ones look quite modern and minimalistic. There&#8217;s no JavaScript involve and it only relies on CSS to create the loading bars.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6.-simple-clean-progress-bars\">6. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNZQdyq\" target=\"_blank\" rel=\"noopener nofollow\">Simple Clean Progress Bars<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNZQdyq\" data-src=\"\/\/codepen.io\/anon\/embed\/WNZQdyq?height=450&amp;theme-id=1&amp;slug-hash=WNZQdyq&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNZQdyq\" title=\"CodePen Embed WNZQdyq\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNZQdyq\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Simple and clean CSS progress bars. Ideal for most basic cases. It uses just a couple of lines of JavaScript in order to animate the progress bar and add the percentage value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7.-animated-circular-progress-bars\">7. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abLvEjW\" target=\"_blank\" rel=\"noopener nofollow\">Animated Circular Progress Bars<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abLvEjW\" data-src=\"\/\/codepen.io\/anon\/embed\/abLvEjW?height=450&amp;theme-id=1&amp;slug-hash=abLvEjW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abLvEjW\" title=\"CodePen Embed abLvEjW\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abLvEjW\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Simple and effective circular progress bars done with only CSS. They get animated on page load as they use CSS keyframe animations. However, with a bit of JavaScript you should be able to adapt it and animate them on demand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8.-step-based-javascript-%26-css-progress-bar\">8. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWemVEj\" target=\"_blank\" rel=\"noopener nofollow\">Step Based JavaScript &amp; CSS Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWemVEj\" data-src=\"\/\/codepen.io\/anon\/embed\/XWemVEj?height=450&amp;theme-id=1&amp;slug-hash=XWemVEj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWemVEj\" title=\"CodePen Embed XWemVEj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWemVEj\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are looking to learn how to pair CSS with JavaScript to make a very dynamic CSS loading bar, this is a good example to learn from.<\/p>\n\n\n\n<p>Unlike other progress bars, this one is designed to support multiple steps. Ideal for long processes or processes with multiple tasks we can track. It provides a more realistic feedback.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9.-circular-progress-bar-with-numbers\">9. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzrWyPd\" target=\"_blank\" rel=\"noopener nofollow\">Circular Progress Bar With Numbers<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzrWyPd\" data-src=\"\/\/codepen.io\/anon\/embed\/YzrWyPd?height=450&amp;theme-id=1&amp;slug-hash=YzrWyPd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzrWyPd\" title=\"CodePen Embed YzrWyPd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzrWyPd\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A simple CSS only circular progress bar with centered percentage numbers. This progress bar won&#8217;t include an animation, but it can easily be added on page load by adding a keyframe animation.<\/p>\n\n\n\n<p>Ideal to showcase skills on your <a href=\"https:\/\/alvarotrigo.com\/blog\/web-developer-portfolio-examples\/\">web developer online portfolio<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10.-simple-dynamic-progress-bar\">10. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BawoJOb\" target=\"_blank\" rel=\"noopener nofollow\">Simple Dynamic Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BawoJOb\" data-src=\"\/\/codepen.io\/anon\/embed\/BawoJOb?height=450&amp;theme-id=1&amp;slug-hash=BawoJOb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BawoJOb\" title=\"CodePen Embed BawoJOb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BawoJOb\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A simple dynamic CSS animated progress bar to learn from. It uses a little bit of JavaScript and jQuery to generate the percentage and trigger the animation. Therefore, we can actually trigger the animation whenever we want and not just during page load.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11.-animated-progress-bar-with-percentage\">11. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLWxBB\" target=\"_blank\" rel=\"noopener nofollow\">Animated Progress Bar With Percentage<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwLWxBB\" data-src=\"\/\/codepen.io\/anon\/embed\/RwLWxBB?height=450&amp;theme-id=1&amp;slug-hash=RwLWxBB&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwLWxBB\" title=\"CodePen Embed RwLWxBB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLWxBB\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Cool animated and numbered progress bar. It is not only CSS but it uses a single JS command (the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CSS\/RegisterProperty\" target=\"_blank\" rel=\"noopener nofollow\">RegisterProperty<\/a> function) to do all the work. It even uses a little icon that can be changed to your purpose.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12.-pure-html-%26-css-step-progress-bar\">12. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/bGoVavJ\" target=\"_blank\" rel=\"noopener nofollow\">Pure HTML &amp; CSS Step Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGoVavJ\" data-src=\"\/\/codepen.io\/anon\/embed\/bGoVavJ?height=450&amp;theme-id=1&amp;slug-hash=bGoVavJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGoVavJ\" title=\"CodePen Embed bGoVavJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/bGoVavJ\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>This bar allows you to choose step-based percentages to fill the CSS animated progress bar. The color changes based on the level. Only HTML and CSS were used for this one, which is quite amazing given that it reacts to click events!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13.-css-animated-progress-bar-with-icon\">13. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKXdZRK\" target=\"_blank\" rel=\"noopener nofollow\">CSS Animated Progress Bar With Icon<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKXdZRK\" data-src=\"\/\/codepen.io\/anon\/embed\/KKXdZRK?height=450&amp;theme-id=1&amp;slug-hash=KKXdZRK&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKXdZRK\" title=\"CodePen Embed KKXdZRK\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKXdZRK\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Fancy adding an icon directly on the progress bar status? This is a good example of how you can create a CSS animated progress bar and use an icon as well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"14.-animated-file-upload-css-loading-bar\">14. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zYEvpao\" target=\"_blank\" rel=\"noopener nofollow\">Animated File Upload CSS Loading Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYEvpao\" data-src=\"\/\/codepen.io\/anon\/embed\/zYEvpao?height=450&amp;theme-id=1&amp;slug-hash=zYEvpao&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYEvpao\" title=\"CodePen Embed zYEvpao\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zYEvpao\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Do you have a file upload system? Then this example is ideal for you. It will show a progress bar right after you submit the file to upload.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15.-stepper-progress-bar\">15. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLWxJJ\" target=\"_blank\" rel=\"noopener nofollow\">Stepper Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwLWxJJ\" data-src=\"\/\/codepen.io\/anon\/embed\/RwLWxJJ?height=450&amp;theme-id=1&amp;slug-hash=RwLWxJJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwLWxJJ\" title=\"CodePen Embed RwLWxJJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLWxJJ\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Interesting CSS progress bar animation design. It may be useful for a <a href=\"https:\/\/alvarotrigo.com\/blog\/product-landing-page\/\">landing product order page<\/a>, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16.-javascript-powered-progress-bar\">16. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEarBK\" target=\"_blank\" rel=\"noopener nofollow\">JavaScript Powered Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWEarBK\" data-src=\"\/\/codepen.io\/anon\/embed\/MWEarBK?height=450&amp;theme-id=1&amp;slug-hash=MWEarBK&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWEarBK\" title=\"CodePen Embed MWEarBK\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEarBK\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A pure JavaScript example with no external components and dependencies. You can have total control over when you want to trigger the animation. Which usually is not possible with CSS only solutions. On top of that, you get the percentage number too.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Related article:<\/strong> <a href=\"https:\/\/alvarotrigo.com\/blog\/website-footers\/\">Beautiful Website Footer Examples<\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17.-form-template-with-progress-bar\">17. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNGOpZM\" target=\"_blank\" rel=\"noopener nofollow\">Form Template With Progress Bar<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNGOpZM\" data-src=\"\/\/codepen.io\/anon\/embed\/rNGOpZM?height=450&amp;theme-id=1&amp;slug-hash=rNGOpZM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNGOpZM\" title=\"CodePen Embed rNGOpZM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNGOpZM\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A more complex example with how a CSS progress bar can be used with multiple HTML elements and to progress a user through a signup\/register page. Useful to learn from.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"18.-progress-bar-with-custom-css-properties\">18. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzryYOL\" target=\"_blank\" rel=\"noopener nofollow\">Progress Bar With Custom CSS Properties<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzryYOL\" data-src=\"\/\/codepen.io\/anon\/embed\/YzryYOL?height=450&amp;theme-id=1&amp;slug-hash=YzryYOL&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzryYOL\" title=\"CodePen Embed YzryYOL\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzryYOL\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>This example triggers the animation whenever we move the mouse. Of course, this is totally configurable and just to showcase the progress bar animation.<\/p>\n\n\n\n<p>It uses no dependencies and has a beautiful design. It makes use of CSS custom properties to link the JS part with the CSS one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"19.-bootstrap-progress-bar-list\">19. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKXdZGw\" target=\"_blank\" rel=\"noopener nofollow\">Bootstrap Progress Bar List<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKXdZGw\" data-src=\"\/\/codepen.io\/anon\/embed\/KKXdZGw?height=450&amp;theme-id=1&amp;slug-hash=KKXdZGw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKXdZGw\" title=\"CodePen Embed KKXdZGw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKXdZGw\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are using Bootstrap and you are looking for a whole range of progress bars (CSS), this is a great example of how they can be used.<\/p>\n\n\n\n<p>Easy and simple! They are not animated, but they can come on handy in many scenarios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"20.-css-arc-based-progress-bars\">20. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEarVw\" target=\"_blank\" rel=\"noopener nofollow\">CSS Arc Based Progress Bars<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWEarVw\" data-src=\"\/\/codepen.io\/anon\/embed\/MWEarVw?height=450&amp;theme-id=1&amp;slug-hash=MWEarVw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWEarVw\" title=\"CodePen Embed MWEarVw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEarVw\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Great CSS progress bar animation for displaying metrics or data that does not change too frequently. No external dependencies and using <strong>just CSS<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-thoughts\">Final Thoughts<\/h2>\n\n\n\n<p>We\u2019ve learned what CSS progress bars are and why they are useful and when to use them. In this article, the main focus was to showcase ready-to-use examples and explain why progress bars are a must in any reactive and dynamic web application.<\/p>\n\n\n\n<p>Feel free to get inspired by any of the examples here and maybe even use one for your own project. And, if you want to build one by yourself, remember we have a guide on <a href=\"https:\/\/alvarotrigo.com\/blog\/how-to-make-a-progress-bar-in-css\/\">How to Make Your Own Progress Bar<\/a> for you as well.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n\n\n\n<p>More articles which you may find interesting.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/10-cool-css-animations-to-add-to-your-website\/\">Cool CSS Animations For Your Website<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-timelines\/\">HTML &amp; CSS Timelines Examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">Gorgeous CSS Text Animation Effects<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/toggle-switch-css\/\">Pure CSS toggle switch examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-round-button\/\">Beautiful CSS rounded buttons<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a curated list with great animated CSS and HTML progress bars. Check out these re-usable examples or get inspired to create your own progress bar.<\/p>\n","protected":false},"author":11,"featured_media":5480,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,16,17],"class_list":["post-5481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-design","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5481"}],"version-history":[{"count":3,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5481\/revisions"}],"predecessor-version":[{"id":9573,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5481\/revisions\/9573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5480"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}