Learn how to create a skill bar / Progress bar with CSS
Skills bar / Progress bar is often needed in a website, where a user want to show his skills or the progress of a given task. Via this tutorial we going to learn how to how to create a skill bar / Progress bar using CSS
Step 1: Adding HTML
<h2> MY Skills </h2>
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
Step 2) Add CSS:
/* Make sure that padding behaves as expected */
* {box-sizing:border-box}
/* Container for skill bars */
.container {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}
.skills {
text-align: right; /* Right-align text */
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
color: white; /* White text color */
}
.html {width: 90%; background-color: #4CAF50;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #808080;} /* Dark Grey */
Complete code will look like this :
You may Also Like
By Richard
/ June 5, 2022
How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1>...
Read More
By Richard
/ May 22, 2022
Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class="videobg"> <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted...
Read More
By Richard
/ April 29, 2022
How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn"...
Read More
By Richard
/ April 19, 2022
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding...
Read More
By Richard
/ April 2, 2022
How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound...
Read More
By Richard
/ February 19, 2022
How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class="header"> <h2>Scroll Indicator</h2> <div...
Read More
By Richard
/ February 15, 2022
Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very...
Read More
By Richard
/ February 4, 2022
There are many a times, when you’re going to need a countdown clock for your project. You may have an...
Read More
By Richard
/ January 20, 2022
How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img...
Read More
By Richard
/ January 13, 2022
How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class="bg-image img1"></div> <div class="bg-image img2"></div>...
Read More