Progress Bar using html and css

Total Views : 854
Zoom In Zoom Out Read Later Print

Code for creating progress bar using html and css.

progress-bar.css

@charset "UTF-8";

/* Progress Bar Style 1 */
.pd-progress-style1 {
height: 30px;
box-shadow: none;
border-radius: 0;
overflow: visible;
margin-top: 20px;
}

.pd-progress-style1+.pd-progress-style1 {
margin-top: 40px;
}

.pd-progress-style1 .progress-bar {
position: relative;
text-align: left;
line-height: 30px;
border-radius: 0;
box-shadow: none;
}

.pd-progress-style1 .pb-label {
position: absolute;
left: 5px;
top: -28px;
color: #000;
font-size: 14px;
font-weight: 600;
}

.pd-progress-style1 .pb-percent {
position: absolute;
right: 10px;
font-weight: 500;
color: #fff;
font-size: 14px;
line-height: 30px;
}

/* Progress Bar Style 2 */
.pd-progress-style2 {
height: 4px;
box-shadow: none;
border-radius: 0;
overflow: visible;
margin-top: 20px;
}

.pd-progress-style2+.pd-progress-style2 {
margin-top: 40px;
}

.pd-progress-style2 .progress-bar {
position: relative;
text-align: left;
line-height: 4px;
border-radius: 0;
box-shadow: none;
}

.pd-progress-style2 .pb-label {
position: absolute;
left: 0px;
top: -18px;
color: #000;
font-size: 14px;
font-weight: 600;
}

.pd-progress-style2 .pb-percent {
position: absolute;
right: 10px;
font-weight: 500;
color: #444;
font-size: 14px;
top: -17px;
}

/* Progress Bar Style 3 */
.pd-progress-style3 {
height: 30px;
box-shadow: none;
border-radius: 0;
overflow: visible;
margin-top: 20px;
}

.pd-progress-style3+.pd-progress-style3 {
margin-top: 40px;
}

.pd-progress-style3 .progress-bar {
position: relative;
text-align: left;
line-height: 30px;
border-radius: 0;
box-shadow: none;
}

.pd-progress-style3 .pb-label {
position: absolute;
left: 0;
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 0 12px;
background: rgba(255, 255, 255, 0.3);
}

.pd-progress-style3 .pb-percent {
position: absolute;
right: 10px;
font-weight: 500;
color: #fff;
font-size: 12px;
line-height: 26px;
top: -10px;
background: #444;
padding: 0 7px;
}

/* Progress Bar Style 5 */
.pd-progress-style4 {
height: 30px;
box-shadow: none;
border-radius: 0;
overflow: visible;
margin-top: 30px;
}

.pd-progress-style4+.pd-progress-style4 {
margin-top: 50px;
}

.pd-progress-style4 .progress-bar {
position: relative;
text-align: left;
border-radius: 0;
box-shadow: none;
}

.pd-progress-style4 .pb-label {
position: absolute;
left: 0px;
top: -30px;
color: #222;
font-size: 14px;
font-weight: 600;
}

.pd-progress-style4 .pb-percent {
position: absolute;
right: 10px;
font-weight: 500;
color: #fff;
font-size: 12px;
top: -30px;
background: #222;
padding: 3px 6px;
border-radius: 4px;
}

.pd-progress-style4 .pb-percent:after {
content: '';
position: absolute;
border: 11px solid transparent;
border-right-color: #222;
left: -19px;
top: 50%;
transform: translateY(-50%);
}

progress-bar.html

<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- meta character set -->
<meta charset="utf-8">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- demo stylesheet -->
<link rel="stylesheet" href="css/main.css"> <!-- This file only use demostration -->
<!-- progress bar stylesheet -->
<link rel="stylesheet" href="css/progress-bar.css">
</head>
<body id="body">
<!-- Main Start -->
<main class="site-content">
<!-- Progress Bar Style 1 Start -->
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-12">
<div class="progress pd-progress-style1">
<div class="progress-bar" role="progressbar" aria-valuenow="93"
aria-valuemin="0" aria-valuemax="100" style="width:93%">
<span class="pb-label">JAVA</span>
<span class="pb-percent">93%</span>
</div>
</div>
<div class="progress pd-progress-style1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82"
aria-valuemin="0" aria-valuemax="100" style="width:82%">
<span class="pb-label">PHP</span>
<span class="pb-percent">82%</span>
</div>
</div>
<div class="progress pd-progress-style1">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100" style="width:65%">
<span class="pb-label">HTML</span>
<span class="pb-percent">65%</span>
</div>
</div>
<div class="progress pd-progress-style1">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:46%">
<span class="pb-label">CSS</span>
<span class="pb-percent">46%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Progress Bar Style 1 End -->
<!-- Progress Bar Style 2 Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-12">
<div class="progress pd-progress-style2">
<div class="progress-bar" role="progressbar" aria-valuenow="93"
aria-valuemin="0" aria-valuemax="100" style="width:93%">
<span class="pb-label">JAVA</span>
<span class="pb-percent">93%</span>
</div>
</div>
<div class="progress pd-progress-style2">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82"
aria-valuemin="0" aria-valuemax="100" style="width:82%">
<span class="pb-label">PHP</span>
<span class="pb-percent">82%</span>
</div>
</div>
<div class="progress pd-progress-style2">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100" style="width:65%">
<span class="pb-label">HTML</span>
<span class="pb-percent">65%</span>
</div>
</div>
<div class="progress pd-progress-style2">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:46%">
<span class="pb-label">CSS</span>
<span class="pb-percent">46%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Progress Bar Style 2 End -->
<!-- Progress Bar Style 3 Start -->
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-12">
<div class="progress pd-progress-style3">
<div class="progress-bar" role="progressbar" aria-valuenow="93"
aria-valuemin="0" aria-valuemax="100" style="width:93%">
<span class="pb-label">JAVA</span>
<span class="pb-percent">93%</span>
</div>
</div>
<div class="progress pd-progress-style3">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82"
aria-valuemin="0" aria-valuemax="100" style="width:82%">
<span class="pb-label">PHP</span>
<span class="pb-percent">82%</span>
</div>
</div>
<div class="progress pd-progress-style3">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100" style="width:65%">
<span class="pb-label">HTML</span>
<span class="pb-percent">65%</span>
</div>
</div>
<div class="progress pd-progress-style3">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:46%">
<span class="pb-label">CSS</span>
<span class="pb-percent">46%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Progress Bar Style 3 End -->
<!-- Progress Bar Style 4 Start -->
<section class="sec-spacer">
<div class="container container-center">
<div class="col-md-12">
<div class="progress pd-progress-style4">
<div class="progress-bar" role="progressbar" aria-valuenow="93"
aria-valuemin="0" aria-valuemax="100" style="width:93%">
<span class="pb-label">JAVA</span>
<span class="pb-percent">93%</span>
</div>
</div>
<div class="progress pd-progress-style4">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82"
aria-valuemin="0" aria-valuemax="100" style="width:82%">
<span class="pb-label">PHP</span>
<span class="pb-percent">82%</span>
</div>
</div>
<div class="progress pd-progress-style4">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100" style="width:65%">
<span class="pb-label">HTML</span>
<span class="pb-percent">65%</span>
</div>
</div>
<div class="progress pd-progress-style4">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:46%">
<span class="pb-label">CSS</span>
<span class="pb-percent">46%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Progress Bar Style 4 End -->
</main>
<!-- Main End -->
</body>
</html>

See More

Latest Photos