Эмуляция измерителя прочности профиля LinkedIn

Мне нужна помощь в реализации чего-то похожего на прочность профиля linkedIn.

Вот как это работает в linkedIn

Вот мой код

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

Вот моя скрипка http://jsfiddle.net/5aufgL8o/6/

Как добавить текст с правой стороны на основе уровня профиля?

UPDATE. Я создал репозиторий в github. Если кто-то хотел бы, чтобы люди лучше использовали его, это было бы лучше. здесь ссылка репо https://github.com/shahilmhd/linkedinprofilestrength

Ответы

Ответ 1

Создайте absolute positioned div для хранения text.
top для div будет таким же, как top элемента .fill.

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>

Ответ 2

Прежде всего, попробуйте использовать прозрачное изображение круга. Белый квадрат после круга не должен появляться. И здесь остался код с примером

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>

Ответ 3

См. FIDDLE

Это поможет? Для этого нужно использовать псевдоэлемент.

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>

Ответ 4

HI теперь вы можете использовать этот код

Я создал div .textSection и определл некоторые css для этого div и некоторый код для js, пожалуйста, изучите.

Вы можете динамически изменять текстовый бросок 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>

Ответ 5

Попробуйте следующее:

Это отобразит сообщение "Начальный", "Промежуточный", "Эксперт", "Все звезды", динамически основанный на проценте, и даже цвет будет изменен .fill в соответствии с условиями

Демо: 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;
    }

Ответ 6

Этот FIDDLE работает хорошо.

Может быть лучше, но у меня мало времени, свяжитесь со мной, если вы можете помочь.

Требуется только лучшее отображение строки, но идея - это что-то, что было в предыдущем ответе, используя jS вместо 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>

Ответ 7

В итоге я оптимизировал код для лучшего понимания и делал его с помощью CSS вместо использования изображений.

вот код

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>