---
title: "Stylish CSS3 progress bars"
description: "Hi friends In this article I’m explaining about CSS3 features stylish progress bars using css3."
author: "Anonymous User"
published: 2014-11-17
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/1534/stylish-css3-progress-bars
category: "css-css3"
tags: ["html5 canvas", "css", "css selector"]
reading_time: 4 minutes
---
# Stylish CSS3 progress bars
Hi friends In this article I’m explaining about CSS3 [features](https://yourviews.mindstick.com/view/86404/best-5-rolls-royce-cars-to-buy-with-features-and-price) stylish [progress](https://yourviews.mindstick.com/view/88472/the-compromise-between-comfort-and-progress) bars using css3.\
##### Description:
You've seen progress bars [everywhere](https://yourviews.mindstick.com/view/80697/bjp-losing-ally-everywhere), they are those bars that display the current completion state for a process, such as a download or [file transfer](https://answers.mindstick.com/qa/109023/how-to-troubleshoot-a-slow-file-transfer). Whether you're building a desktop or a [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about), at a certain point, you may need to use this UI element.
[Having said](https://answers.mindstick.com/qa/37758/what-is-the-pushback-someone-would-experience-having-said-that-about-the-last-u-s-president) that, in this article you'll learn how to create stylish and animated progress bars using CSS3.
##### HTML
```
```
## CSS
```
.progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; background-color:#a5a5a5;}
```
## Output
****
##### Let's add some color, gradients, stripes:
You may have seen this CSS3 technique before, I just adapted it a little for this example:
```
.progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; background-color:#a5a5a5;} .blue span { background-color: #34c2e3; } .orange span { background-color: #fecf23; background-image: linear-gradient(top, #fecf23, #fd9215); } .green span { background-color: #a5df41; background-image: linear-gradient(top, #a5df41, #4ca916); } .stripes span { background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); animation: animate-stripes 3s linear infinite; } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;}}
```
##### Output
****
## Shine
Not sure if this is the best name I could find for this CSS3 [animation](https://www.mindstick.com/articles/13040/seven-helpful-tips-to-start-and-grow-an-animation-video-company), but here we go:
## HTML
```
```
## CSS
```
.progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; background-color:#a5a5a5;} .blue span { background-color: #34c2e3; } .orange span { background-color: #fecf23; background-image: linear-gradient(top, #fecf23, #fd9215); } .green span { background-color: #a5df41; background-image: linear-gradient(top, #a5df41, #4ca916); } .stripes span { background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); animation: animate-stripes 3s linear infinite; } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;}} .shine span { position: relative;} .shine span::after { content: ''; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; border-radius: 3px; animation: animate-shine 2s ease-out infinite; } @keyframes animate-shine { 0% {opacity: 0; width: 0;} 50% {opacity: .5;} 100% {opacity: 0; width: 95%;}}
```
##### Output
### Glow
CSS3 keyframes animation based on box-shadow property:
```
.glow span { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; animation: animate-glow 1s ease-out infinite; } @keyframes animate-glow { 0% { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} }
```
## Output
\
in my next post i'll discuss about Offline Add, Edit, [Delete Data](https://www.mindstick.com/forum/34184/how-to-insert-update-delete-data-from-database-using-c-sharp) in HTML5 [IndexedDB](https://www.mindstick.com/interview/34289/what-is-indexeddb)\
---
Original Source: https://www.mindstick.com/articles/1534/stylish-css3-progress-bars
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.