w3schools

https://www.w3schools.com/howto/howto_css_skill_bar.asp

HTML

CSS

JavaScript

PHP

HTML

<p>HTML</p>
<div class="container2">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container2">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container2">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container2">
  <div class="skills php">60%</div>
</div>

CSS

/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container2 {
  width: 100%; /* Full width */
}

.skills {
  text-align: right; /* Right-align text */
  padding-top: 5px; /* Add top padding */
  padding-bottom: 5px; /* Add bottom padding */
  color: white; /* White text color */
}

.html {width: 90%; background-color: #5F9EA0;} /* CadetBlue */
.css {width: 80%; background-color: #8FBC8F;} /* DarkSeaGreen */
.js {width: 65%; background-color: #2F4F4F;} /* DarkSlateGray */
.php {width: 60%; background-color: #E9967A;} /* DarkSalmon */