Skip to content

Instantly share code, notes, and snippets.

@mksalada

mksalada/skills-bootstrap-progress-bar.html

Created February 8, 2020 17:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mksalada/717a0d6b926e597d1cf44e9ee89e49db to your computer and use it in GitHub Desktop.
Save mksalada/717a0d6b926e597d1cf44e9ee89e49db to your computer and use it in GitHub Desktop.
Download ZIP
web development skills progress bar using bootstrap 4
Raw
skills-bootstrap-progress-bar.html
<!DOCTYPE html>
<html>
<head>
<title>My Skills</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<style>
body {
font-family: sans-serif;
margin: 100px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Zilla Slab', sans-serif;
}
h2 {
font-weight: bold;
}
p.skill {
font-weight: bold;
font-family: 'Roboto Slab', sans-serif;
}
p.subtitle {
font-family: 'Roboto Slab', sans-serif;
font-size: 18px;
font-weight: ;
}
i {
font-weight: bold;
font-style: italic;
float: right;
font-family: 'Roboto Slab', sans-serif;
}
hr {
width: 40px;
background-color: #3178fb;
height: 2px;
}
.progress {
height: 10px;
}
</style>
</head>
<body>
<center>
<h2>SKILLS</h2>
<hr>
<p class="subtitle">Web Development</p>
</center>
<br>
<div class="container">
<div class="row">
<div class="col">
<p class="skill">HTML5 <i class="val">95%</i></p>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col">
<p class="skill">CSS3 <i class="val">60%</i></p>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<p class="skill">JavaScript <i class="val">5%</i></p>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col">
<p class="skill">PHP7 <i class="val">40%</i></p>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment