CSS plays an important role in styling your website. CSS makes it easy to create reusable elements such as background patterns, cards, buttons, and navigation bars. These ready-to-use elements help you create dynamic web applications quickly and efficiently.
You can use progress bars to display metrics, indicate how long files take to download, and provide real-time feedback on background processes. You can use these four progress bar examples directly in your project or adapt them to your liking.
1. Separate progress bar
This modern, discreet progress bar uses CSS keyframe animations to add progressive effects to sections of your website. In this example, we are using the infinite animation property, so each individual bar will be animated and repeat forever. You can show this progress bar when something is happening in the background.Ultimately help improve his UX of the website
HTML code
<div class="progress">
<div class="track">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
CSS code
body {
background-color:
}
div.track, div.bar {
box-sizing: border-box;
position: relative;
}
div.progress {
width: 100px;
padding-left: 2px;
padding-right: 2px;
height: 21px;
border-radius: 5px;
border: solid 3px
background-color:
position: absolute;
top: calc(50% - 13px);
left: calc(50% - 53px);
}
div.track {
position: relative;
width: 100%;
height: 21px;
overflow: hidden;
-webkit-animation: prgBar 5s linear 0s infinite alternate;
animation: prgBar 5s linear 0s infinite alternate;
}
div.bar {
height: 15px;
width: 6px;
background-color:
position: relative;
border-radius:2px;
box-shadow: 0px 0px 5px
margin-left: 2px;
margin-right: 2px;
margin-bottom: 100px;
top: 3px;
float: left;
clear: top;
}
@-webkit-keyframes prgBar {
0% { width: 0% }
9.99% { width: 0% }
10% { width: 10% }
95% { width: 100% }
}
@keyframes prgBar {
0% { width: 0% }
9.99% { width: 0% }
10% { width: 10% }
95% { width: 100% }
}
2. Pure HTML and CSS step progress bar
This example uses stage-based percentages to fill the progress bar. A CSS selector specifies the color of the progress bar for each percentage value. You can fine tune the color by changing the . Background color Properties for each step (#five:checked, #twentyfive:checked, etc.). You can also remove or include new steps depending on your requirements. width Step properties accordingly.
HTML code
<div class="container">
<input type="radio" class="radio" name="progress" value="five" id="five">
<label for="five" class="label">5%</label>
<input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
<label for="twentyfive" class="label">25%</label>
<input type="radio" class="radio" name="progress" value="fifty" id="fifty">
<label for="fifty" class="label">50%</label>
<input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
<label for="seventyfive" class="label">75%</label>
<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">100%</label>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
CSS code
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color:
background:
}
.container {
margin: 60px auto;
width: 400px;
text-align: center;
}
.container .progress {
margin: 0 auto;
width: 400px;
}
.progress {
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
height: 16px;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
#five:checked ~ .progress > .progress-bar {
width: 5%;
background-color:
}
#twentyfive:checked ~ .progress > .progress-bar {
width: 25%;
background-color:
}
#fifty:checked ~ .progress > .progress-bar {
width: 50%;
background-color:
}
#seventyfive:checked ~ .progress > .progress-bar {
width: 75%;
background-color:
}
#onehundred:checked ~ .progress > .progress-bar {
width: 100%;
background-color:
}
.radio {
display: none;
}
.label {
display: inline-block;
margin: 0 5px 20px;
padding: 3px 8px;
color:
text-shadow: 0 1px black;
border-radius: 3px;
cursor: pointer;
}
.radio:checked + .label {
color: white;
background: rgba(0, 0, 0, 0.25);
}
3. Circular Minimalist Progressive Bar
If you want to create a circular progress bar, these minimal animation examples might be one of your best options. Circular progress bars are mostly used in personal, business, and data visualization-heavy websites. Play around with the code and make changes to suit your requirements. You can change the length of the bar by changing the . stroke dash offset CSS property.
HTML code
<div class="container">
<div class="container__progressbars">
<div class="progressbar">
<svg class="progressbar__svg">
<circle cx="80" cy="80" r="70" class="progressbar__svg-circle circle-html shadow-html"> </circle>
</svg>
<span class="progressbar__text shadow-html">HTML</span>
</div>
</div>
</div>
CSS code
a {
text-decoration: none;
}
.made {
display: block;
color:
font-size: 0.75rem;
text-align: center;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:
}
.container__progressbars {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
min-width: 270px;
width: 100%;
min-height: 100%;
}
.progressbar {
position: relative;
width: 170px;
height: 170px;
margin: 1em;
transform: rotate(-90deg);
}
.progressbar__svg {
position: relative;
width: 100%;
height: 100%;
}
.progressbar__svg-circle {
width: 100%;
height: 100%;
fill: none;
stroke-width: 10;
stroke-dasharray: 440;
stroke-dashoffset: 440;
stroke: white;
stroke-linecap: round;
transform: translate(5px, 5px);
}
.shadow-html {
filter: drop-shadow(0 0 5px
}
.circle-html {
-webkit-animation: anim_circle-html 1s ease-in-out forwards;
animation: anim_circle-html 1s ease-in-out forwards;
}
.progressbar__text {
position: absolute;
top: 50%;
left: 50%;
padding: 0.25em 0.5em;
color: white;
font-family: Arial, Helvetica, sans-serif;
border-radius: 0.25em;
transform: translate(-50%, -50%) rotate(90deg);
}
@-webkit-keyframes anim_circle-html {
to {
stroke-dashoffset: 22;
}
}
@keyframes anim_circle-html {
to {
stroke-dashoffset: 22;
}
}
4. CSS skill progress bar
If you’re creating a simple progress bar with percentages, this might be the way to go. The height of the progress bar is height properties of .Skill bar When .skill: before class. You can change the length by changing the . width class properties (.skill1, .skill2, .skill3).
HTML code
<div class="wrapper">
<h2 class="how-title">CSS3 Skill Progress bar</h2>
<div class="skill">
<p>HTML5</p>
<div class="skill-bar skill1">
<span class="skill-count1">95%</span>
</div>
</div>
<div class="skill">
<p>CSS3</p>
<div class="skill-bar skill2">
<span class="skill-count2">85%</span>
</div>
</div>
<div class="skill">
<p>JQUERY</p>
<div class="skill-bar skill3">
<span class="skill-count3">75%</span>
</div>
</div>
</div>
CSS code
.wrapper {
width: 400px;
font-family: 'Roboto', sans-serif;
margin:0 auto;
}
.skill {
margin-bottom: 35px;
position: relative;
overflow-x:hidden;
}
.skill > p {
font-size: 18px;
font-weight: 700;
color:
margin: 0;
}
.skill:before {
width: 100%;
height: 10px;
content: "";
display: block;
position: absolute;
background:
bottom: 0;
}
.skill-bar {
width: 100%;
height: 10px;
background:
display: block;
position: relative;
}
.skill-bar span {
position: absolute;
border-top: 5px solid
top: -30px;
padding: 0;
font-size: 18px;
padding: 3px 0;
font-weight: 500;
}
.skill-bar {
position: relative;
}
.skill1 .skill-count1 {
right: 0;
}
.skill1 {
width: 95%;
}
.skill2 {
width: 85%;
}
.skill2 .skill-count2 {
right: 0;
}
.skill3{
width: 75%;
}
.skill3 .skill-count3 {
right: 0;
}
Learn incredible CSS tricks
Using these CSS techniques, you can create attractive and reusable progressive bars. But you can do more with CSS. CSS provides many features such as manipulating images, making text and images responsive, handling overflow, and more.
