Home » How to » How to create Skill Bar using css

How to create Skill Bar using css

Posted by: admin October 30, 2017 Leave a comment

How to create Skill Bar using js and css

skill bar is very common in our resume, can make employers and viewers on your technical situation at a glance, can also be used in the company staff skills display

Step 1:Add Html

<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 1:Add Html

/* 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-right: 20px; /* Add some right padding */
line-height: 40px; /* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
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 */

 

Leave a Reply

Your email address will not be published. Required fields are marked *