Emulating the LinkedIn "profile strength" meter

Question

I need help in implementing something similar to the profile strength of linkedIn.

Here is the image how it works in linkedIn

Here is my code

<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>

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

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

fillMeter(82);

Here is my fiddle http://jsfiddle.net/5aufgL8o/6/

How can I add text on the right side based on profile level?

UPDATE : I've created a repository in github, If any one would like to make it better for people to use it that would be better. here is the repo link https://github.com/shahilmhd/linkedinprofilestrength

Answer 1

• Create absolute positioned div to hold text.

• top of the div will be same as top of the .fill element.

function fillMeter(percent) {
  var pixels = (percent / 100) * 90;
  $(".fill").css('top', (90 - pixels) + "px");
  $(".fill").css('height', pixels + "px");
  $(".line").css('top', (90 - pixels) + "px");
  $(".line div").text('All-star'); //This text could be dynamic
}

fillMeter(82);

.fill {
  position: absolute;
  top: 90px;
  left: 0;
  height: 0px;
  width: 90px;
  background-color: green;
  overflow: hidden;
}
.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow: hidden;
  z-index: 99;
}
.line {
  position: absolute;
  width: 200px;
  left: 90px;
  height: 2px;
  background-color: black;
  z-index: 98;
}
.line div {
  color: black;
  position: relative;
  top: -20px;
  text-align: end;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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">
  <div class='line'>
    <div>

    </div>
  </div>
</div>

Answer 2

First of all try to use transparent image of circle. The white square after the circle should not come. And rest here is the code with example

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

fillMeter(82);

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

.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow: hidden;
  z-index: 1;
}

.text {
  position: absolute;
  left: 100%;
  top: -17px;
  z-index: 1;
  border-bottom: 1px solid #000;
  padding-left: 30px;
}

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

</div>

Answer 3

See FIDDLE

Will this help ? Just used pseudo element to achieve this.

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

fillMeter(82);

.fill {
      position: absolute;
      top: 90px;
      left: 0;
      height: 0px;
      width: 90px;
      background-color: green;
    }
    .mask {
      display: block;
      height: 90px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      overflow:hidden;
    }
    
    .fill:before{
      content: 'expert';
      width: 150px;
      height: 1px;
      background: #000;
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      vertical-align: top;
    }

<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>

Or combining two pseudo classes,

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

fillMeter(82);

.fill {
      position: absolute;
      top: 90px;
      left: 0;
      height: 0px;
      width: 90px;
      background-color: green;
    }
    .mask {
      display: block;
      height: 90px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      overflow:hidden;
    }
    
    .fill:before{
      content: '';
      width: 150px;
      height: 1px;
      background: #000;
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      vertical-align: top;
    }
    
    .fill:after{
      content: 'Expert';
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      top: -20px;
    }

<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>