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

We are all so obsessed with if we could nobody sever asked if we should. What's so wrong with utilizing an image for this purpose? — Mike McMahon, Jun 02 '16 at 09:25
@mike your question seems confusing. Please be more specific. — Shahil M, Jun 02 '16 at 09:43
@Shl I guess Mike asked, why you're not using set of images that simplify the matter. — Andrew T., Jun 02 '16 at 14:07
@Shl create the various states of the meter in photoshop, save each as .jpg and serve up the proper image based on state. It's 3 lines of javascript and an image tag instead of the comprehensive css. — sawyer, Jun 02 '16 at 15:22
Haha sorry it's a bit of a allusion to the classic Jurassic park scene. Yes we can bio hack amphibians and lizards with Dino DNA, but should we? And yes we can hack a lot of CSS and HTML to make the chart, but should we? One Sprite sheet with three images and ultra simplified CSS/HTML is all that's needed. — Mike McMahon, Jun 02 '16 at 23:45
Yes you are right mike. But it would be better to reduce the image possibility as CSS is capable of achieving things. — Shahil M, Jun 03 '16 at 06:59
@Shl hence my "we are all so obsessed with if we could nobody ever asked if we should" comment (noticing the typo in it now). Essentially, sure it is capable of it, but is it the best option for it? Most portable? Best supported?...etc just because we can do something does not mean we should do something. — Mike McMahon, Jun 08 '16 at 20:09

Rayon · Answer 1 · 2016-06-02T11:00:37.673

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>

score 4 · Answer 2 · answered Jun 02 '16 at 06:13

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>

Jinu Kurian · Answer 3 · 2016-06-02T06:19:52.987

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>

This is close to the solution but the issue is that the label will vary based on values like "biginer", "intermediate" "expert" — Shahil M, Jun 02 '16 at 06:13
Well, you can easily manipulate pseudo elements. see here http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Jinu Kurian, Jun 02 '16 at 06:16
@Shl Check this fiddle, I have made necessary changes. http://jsfiddle.net/5aufgL8o/8/ — Jinu Kurian, Jun 02 '16 at 06:19

score 2 · Answer 4 · answered Jun 02 '16 at 06:17

HI now you can used to this code

I have create a div .textSection and define some css to this div and some code to js please look into .

You can dynamic change to text throw js

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
      $(".textSection").css('top', (90-pixels));
      
      if(percent < 25) {
    $(".textSection").text("Beginner");
  } else if(percent >= 25 && percent < 50) {
            $(".textSection").text("Intermediate");
  } else if(percent >= 50 && percent < 75) {
    $(".textSection").text("Expert");
  } else if(percent >= 75) {
    $(".textSection").text("All star");
  }
      
}

fillMeter(40);

.textSection{
  position: absolute;
  margin-top:-20px;
    top: 0;
    left: 81px;
    border-bottom: solid red 2px;
    overflow: hidden;
    z-index: 1;
    padding-left: 21px;
    white-space: nowrap;
}
.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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;display: inline-block;">
<div class="textSection"> </div>
  <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>

score 2 · Answer 5 · edited Jun 04 '16 at 13:00

Try this:

This will display message Beginner, Intermediate, Expert, All star dynamically based on percentage And even the color will be change of .fill according to conditions

Demo: http://jsfiddle.net/hanqtjzb/

Html:

<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">
  <span  class="msg">aaa</span>
  <div class="line">

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

jQuery:

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

      if(percent < 25) {
        $(".msg").text("Beginner");
      } else if(percent >= 25 && percent < 50) {
                $(".msg").text("Intermediate");
      } else if(percent >= 50 && percent < 75) {
        $(".msg").text("Expert");
      } else if(percent >= 75) {
        $(".msg").text("All star");
      }

}

fillMeter(55);

Css:

.line {
    border: 1px solid;
    position: absolute;
    left: 90px;
    width: 20%;
    text-align:top;
}
.msg {
  position: absolute;
    left: 90px;
    width: 20%;
    text-align:top;
}

.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;
    }

score 2 · Answer 6 · answered Jun 02 '16 at 07:04

This FIDDLE works good.

Could be better but I don't have much time now, contact me if can help you.

Only needs a better display of the line but the idea is something that previous response, using jS instead of css.

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
    $(".text").css('top', (80-pixels) + "px"); 
       var texto = ""
      if (percent > 90) {
        texto = "All-Star";
      } else if ( percent < 90 & percent > 75) {
        texto = "Expert";
      } else if ( percent < 75 & percent > 25) {
       texto = "<u>Intermediate</u>";
      } else if (percent < 25) {
       texto = "Begginer";
      }

      $(".text").html("<u>_____________"+texto+"<u>")

}



fillMeter(70);

.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;
    }
    .text {
      position: absolute;
      top: 0;
      left: 90px;
    }

<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>
<div class="text" >_____________________ </div>

score 0 · Answer 7 · answered Jun 03 '16 at 04:51

I ended up optimizing the code for better understanding and doing it with only CSS instead of using images.

here is the code

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".level").css('top', (77-pixels) + "px");
      $(".fill").css('height', pixels + "px");
      
      
         if (percent <= 0) {
            $(".level").css("top", "67px");
            $(".level").text("Beginner");
        } else if (percent <= 25) {
            $(".fill").css('background', "#FF6D3E");
            $(".level").text("Beginner");
        } else if (percent <= 50) {
            $(".fill").css('background', "#F2C548");
            $(".level").text("Intermediate");
        } else if (percent <= 75) {
            $(".fill").css('background', "#2F9CE1");
            $(".level").text("Expert");
        } else if (percent <= 100) {
            $(".level").text("All Star");
            $(".fill").css('background', "#287EB6");
        } else if (percent <= 99) {
            $(".level").css("top", "0");
        }
      
}

fillMeter(65);

.profile-strength-wrap {
    position: relative;
    margin-top: 40px;
    width: 200px;
    height: 100px;
}

    .profile-strength-wrap .fill {
        position: absolute;
        top: 90px;
        left: 0;
        height: 0px;
        width: 90px;
        overflow: hidden;
    }

    .profile-strength-wrap .mask {
        display: block;
        height: 90px;
        left: 0;
        position: absolute;
        top: 0;
        width: 90px;
        overflow: hidden;
        border-radius: 50%;
        border: 4px solid #CACACA;
        z-index: 120;
    }

    .profile-strength-wrap span.level {
        position: absolute;
        left: 20%;
        top: 1px;
        width: 80%;
        text-align: right;
        border-bottom: 1px solid #888;
        text-transform:capitalize;
    }

.profile-strength h3 {
       font-size: 1.2em;
    text-align: left;
    font-weight: 500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-strength">
                             
                            <div class="profile-strength-wrap">
                                <div class="mask">
                                    <div class="fill"></div>
                                </div>
                                <span class="level"></span>
                            </div>
                    <h3>Profile Strength</h3>

                      </div>

Emulating the LinkedIn "profile strength" meter

7 Answers7