Using the progress bars, you can show the user how much you have mastered on each of your skills in your personal resume. Progress bars are easy for any user to understand. These progress bars have different colors. When the screen loads, each of the bars fills from zero to the specified percentage.


HTML
<!-- This script got from www.devanswer.com -->
<div class="animated-progress progress-blue">
<span data-progress="45"></span>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</div>
<div class="animated-progress progress-green">
<span data-progress="60"></span>
</div>
<div class="animated-progress progress-purple">
<span data-progress="70"></span>
</div>
<div class="animated-progress progress-red">
<span data-progress="85"></span>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
.animated-progress {
  width: 300px;
  height: 30px;
  border-radius: 5px;
  margin: 20px auto;
  border: 1px solid rgb(189, 113, 113);
  overflow: hidden;
  position: relative;
}
.animated-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
}
.progress-blue span {
  background-color: blue;
}
.progress-green span {
  background-color: green;
}
.progress-purple span {
  background-color: indigo;
}
.progress-red span {
  background-color: red;
}
Javascript
$(".animated-progress span").each(function () {
  $(this).animate(
    {
      width: $(this).attr("data-progress") + "%",
    },
    1000
  );
  $(this).text($(this).attr("data-progress") + "%");
});