The progress bar on a webpage is used to represent the progress or completion of a task. Sometimes when we download or upload a file, run an application, install and transfer a file, a progress bar is shown to tell users that how much percentage of the task has been completed or remaining. In this tutorial, I am going to make some cool progress bars in CSS.

Simple Progress Bars


Simple Progress Bars
HTML
<h3>Simple Progress Bars</h3>
<div class="container">
<div class=
"red progressbar" style="width:20%"></div>
</div>
<div class=
"container">
<div class=
"blue progressbar" style="width:40%"></div>
</div>
<div class=
"container">
<div class=
"yellow progressbar" style="width:60%"></div>
</div>
<div class=
"container">
<div class=
"green progressbar" style="width:80%"></div>
</div>
<div class=
"container">
<div class=
"orange progressbar" style="width:100%"></div>
</div>

CSS
.red{background-color:#C33}
.blue{background-color:#09F}
.green{background-color:#6F0}
.yellow{background-color:#FC0}
.orange{background-color:#F60}
.container{
            background-color:#F1F1F1;
            border-radius:10px;
            height:15px;
            overflow:hidden; /*Your own color*/
            margin-bottom:15px;
}
.progressbar{
            height:100%;
            width:0%;
            float:left;
}


Animated Progress Bars


Animated Progress Bars
HTML
<h3>Animated Progress Bars</h3>
<div class=
"container striped active">
<div class=
"progressbar red" style="width:33.33%"></div>
</div>
<div class=
"container striped active">
<div class=
"progressbar blue" style="width: 66.66%"></div>
</div>

CSS
@-webkit-keyframes bars{
from{ background-position:40px 0 } to { background-position:0 0 }
}

@keyframes bars{
from{ background-position:40px 0 } to { background-position:0 0 }
}

.red{background-color:#C33}
.blue{background-color:#09F}
.container{
            background-color:#F1F1F1;
            border-radius:10px;
            height:15px;
            overflow:hidden; /*Your own color*/
            margin-bottom:15px;
}
.progressbar{
            height:100%;
            width:0%;
            float:left;
}
.container.active .progressbar{
            -webkit-animation:bars 5s linear infinite;
            animation:bars 5s linear infinite;
}
.striped .progressbar{
            background-size:40px 40px;
            background-image:linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%, rgba(255,255,255) 50%, transparent 50%, transparent);
            background-image:-webkit-linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%,#fff 50%, transparent 50%, transparent);
}
.striped .red{
            background-image:-webkit-linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
            background-image:linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
}
.striped .blue{
            background-image:-webkit-linear-gradient(135deg, #0CF 25%, transparent 25%, transparent 50%, #0CF 50%, #0CF 75%, transparent 75%, transparent);
            background-image:llinear-gradient(135deg, #0CF 25%, transparent 25%, transparent 50%, #0CF 50%, #0CF 75%, transparent 75%, transparent);
}


Multicolored Progress Bars


Mulitcolored Progress Bars
HTML
<h3>Multicolored Progress Bars</h3>
<div class=
"container">
<div class=
"orange progressbar" style="width:25%"></div>
<div class=
"red progressbar" style="width:30%"></div>
<div class=
"yellow progressbar" style="width:45%"></div>
</div>
<div class=
"container">
<div class=
"blue progressbar" style="width:10%"></div>
<div class=
"green progressbar" style="width:50%"></div>
<div class=
"red progressbar" style="width:40%"></div>
</div>
CSS
.red{background-color:#C33}
.blue{background-color:#09F}
.green{background-color:#6F0}
.yellow{background-color:#FC0}
.orange{background-color:#F60}
.container{
            background-color:#F1F1F1;
            border-radius:10px;
            height:15px;
            overflow:hidden; /*Your own color*/
            margin-bottom:15px;
}
.progressbar{
            height:100%;
            width:0%;
            float:left;
}


Striped Progress Bars


Striped Progress Bars
HTML
<h3>Striped Progress Bars</h3>
<div class=
"container striped">
<div class=
"red progressbar" style="width:80%"></div>
</div>
<div class=
"container striped">
<div class=
"green progressbar" style="width:40%"></div>
</div>
CSS
.red{background-color:#C33}
.green{background-color:#6F0}
.container{
            background-color:#F1F1F1;
            border-radius:10px;
            height:15px;
            overflow:hidden; /*Your own color*/
            margin-bottom:15px;
}
.progressbar{
            height:100%;
            width:0%;
            float:left;
}
.striped .progressbar{
            background-size:40px 40px;
            background-image:linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%, rgba(255,255,255) 50%, transparent 50%, transparent);
            background-image:-webkit-linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%,#fff 50%, transparent 50%, transparent);
}
.striped .red{
            background-image:-webkit-linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
            background-image:linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
}
.striped .green{
            background-image:-webkit-linear-gradient(135deg, #6C0 25%, transparent 25%, transparent 50%, #6C0 50%, #6C0 75%, transparent 75%, transparent);
            background-image:linear-gradient(135deg, #6C0 25%, transparent 25%, transparent 50%, #6C0 50%, #6C0 75%, transparent 75%, transparent);
}


Gradient Progress Bars


Gradient Progress Bars
HTML
<h3>Gradient Progress Bars</h3>
<div class=
"container gradient">
<div class=
"yellow progressbar" style="width:25%"></div>
</div>
<div class=
"container gradient">
<div class=
"blue progressbar" style="width:75%"></div>
</div>
CSS
.container{
            background-color:#F1F1F1;
            border-radius:10px;
            height:15px;
            overflow:hidden; /*Your own color*/
            margin-bottom:15px;
}
.progressbar{
            height:100%;
            width:0%;
            float:left;
}
.gradient .yellow{
            background-image:-webkit-linear-gradient(#FC6,#FF6);
            background-image:linear-gradient(#FC6,#FF6);
}
.gradient .blue{
            background-image:-webkit-linear-gradient(#06F,#0CF);
            background-image:linear-gradient(#06F,#0CF);
}

DEMO
SOURCE


Tagged in : CSS

Author
Amrit S. Lotay

Hi, I am a graduate in Computer Applications and have certification in Web Development and .NET Technologies. I also like creating graphics. Vector and Graphics Designing became a passion for me in early years of my graduation. I really enjoy doing programming and creating vectors and artwork. Computers is what i love the most.