How to create a circle shaped profile meter for a registration form

Question

I have a form called registration.html. I want to include a percentage profile meter. The profile meter should change percentage completed like 10%, 20% completed and so on depending upon the fields entered by the user. I want to do it using html, javascript, css.

Thanks

Answer 1

Something like LinkedIn is:

function fillMeter(percent) {
  var pixels = (percent/100) * 90;
  $(".fill").css('top', (90-pixels) + "px");
  $(".fill").css('height', pixels + "px");
}

fillMeter(40);

.fill {
  position: absolute;
  left: 0;
  width: 90px;
  background-color: green;
  overflow:hidden;
}
.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

To change the percentage call fillMeter(55) for 55% etc. Show below:

function fillMeter(percent) {
  var pixels = (percent/100) * 90;
  $(".fill").css('top', (90-pixels) + "px");
  $(".fill").css('height', pixels + "px");
}

fillMeter(55);

.fill {
  position: absolute;
  left: 0;
  width: 90px;
  background-color: green;
  overflow:hidden;
}
.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

Working JSFiddle: http://jsfiddle.net/5aufgL8o/1/