Эмуляция счетчика «силы профиля» LinkedIn ⇐ Jquery

[Anonymous]

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

Вот изображение того, как это работает в linkedIn

< img alt="введите здесь описание изображения" src="https://i.sstatic.net/4T5ww.jpg" />

Вот мой код

Код: Выделить всё

[img]https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png[/img]



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

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

ОБНОВЛЕНИЕ: я создал репозиторий в github. Если кто-нибудь захочет сделать лучше, чтобы люди использовали его, это было бы лучше. вот ссылка на репо https://github.com/shahilmhd/linkedinprofilestrength

Подробнее здесь: https://stackoverflow.com/questions/375 ... ngth-meter