Develop Reference

Struggling to clone animation

I am trying to create a linear animation with pipes just like the flappy bird game. When I have one single pipe, I see a random gap and it works well, but when I clone all the pipes, there is no longer a gap at a random position.
How can I give the gaps in the pipe a random position when I have multiple pipes, and why is it not working as expected?
var block = document.getElementById("block");
//clone the pipe multiples times
var blockClone;
for (var i = 0; i < 4; i++) {
blockClone = block.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
block.appendChild(blockClone);
//remove animtion from clones
blockClone.style.animationName = "none";
}
//gap inbetween each pipe
var hole = document.getElementById("hole");
var holeClone;
for (var i = 0; i < 4; i++) {
holeClone = hole.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
blockClone.appendChild(hole);
block.appendChild(hole);
//remove animtion from clones
holeClone.style.animationName = "none";
hole.addEventListener('animationiteration', () => {
var random = -((Math.random() * 300) + 150);
hole.style.top = random + "px";
});
}
body {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
}
#game {
width: 100%;
height: 500px;
border: 1px solid red;
margin: auto;
overflow: hidden;
}
/* pipe version 1 */
#block {
width: 60px;
height: 500px;
background-color: green;
background-image: url("https://l.dropbox.com/s/4jz7uq4e25o8su5/sketch-1664244879.png?dl=0");
background-size: cover;
position: absolute;
left: 100px;
animation: block 5s infinite linear;
}
#hole {
width: 60px;
height: 210px;
background-color: red;
position: absolute;
left: 0px;
top: -10px;
/* animation: block 5s infinite
linear;*/
background-image: url("https://dldropbox.com/s/j7enawgtuepj7au/sketch-166428805830.png?dl=0");
background-size: cover;
}
#character {
width: 40px;
height: 40px;
background-color: none;
position: absolute;
top: 100px;
left: 40px;
border-radius: ;
z-index: 1;
background-color: red;
}
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
cursor: none;
opacity: 0.3;
text-align: center;
}
/* used to prevent user from tapping even after the game has ended*/
.mainoverlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
opacity: 0;
}
#blokhold {
animation: block 5s infinite linear;
}
#keyframes block {
0% {
left: 350px
}
100% {
left: -890px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game">
<div id="blokhold">
<div id="block">
<div id="hole"></div>
</div>
</div>
<div id="character"></div>
</div>

object rotation resets on new click with javascript

I have created a simple cube in CSS and would like to be able to rotate it around with click and drag to display text on the sides etc, but every time you click and drag, it resets to the original position. How could I store the last rotated angle to be able to ensure it starts where it left off? I appreciate any help. Here is the code:
// Select the Cube
const cube = document.querySelector(".cube");
const body = document.querySelector("body");
// Get the x, y position when click
window.addEventListener("mousedown", function(e) {
const x = e.clientX;
const y = e.clientY;
// rotate
window.addEventListener("mousemove", moveRotate);
function moveRotate(e) {
cube.style.transform = `
rotateX(${-(e.clientY - y) / 2}deg)
rotateY(${(e.clientX - x) / 2}deg)`;
body.style.cursor = "grabbing";
}
window.addEventListener("mouseup", function() {
window.removeEventListener("mousemove", moveRotate);
body.style.cursor = "context-menu";
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(0, 0, 0);
}
.cube {
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span {
color: azure;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, rgb(0, 255, 0));
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
.top {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
}
.top div {
color: white;
position: absolute;
top: 45%;
left: 35%
}
.bottom {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: rgba(0, 255, 0);
transform: rotateX(90deg) translateZ(-150px);
}
<body>
<div class="cube">
<div class="top"></div>
<div class="bottom"></div>
<div class="sides">
<span class=front style="--i:0;">0</span>
<span class=left style="--i:1;">1</span>
<span class=back style="--i:2;">2</span>
<span class=right style="--i:3;">3</span>
</div>
</div>
</body>

You need to store the last calculated rotation value on the mouseUp event. Then add it to the value of the new calculated rotation in the mouseMove listener. The initial value must be set to zero outside both events.
// Select the Cube
const cube = document.querySelector(".cube");
const body = document.querySelector("body");
let last_x = 0,
last_y = 0
// Get the x, y position when click
window.addEventListener("mousedown", function (e)
{
const x = e.clientX;
const y = e.clientY;
let new_x = 0,
new_y = 0;
// rotate
window.addEventListener("mousemove", moveRotate);
function moveRotate(e)
{
new_x = ((e.clientX - x) / 2) + last_x
new_y = (-(e.clientY - y) / 2) + last_y
cube.style.transform =`
rotateX(${new_y}deg)
rotateY(${new_x}deg)`;
body.style.cursor = "grabbing";
}
window.addEventListener("mouseup",function ()
{
last_x = new_x
last_y = new_y
window.removeEventListener("mousemove", moveRotate);
body.style.cursor = "context-menu";
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(0, 0, 0);
}
.cube
{
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
}
.cube div
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span
{
color:azure;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, rgb(0, 255, 0));
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
.top
{
position: absolute;
top:0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
}
.top div
{
color: white;
position: absolute;
top: 45%;
left: 35%
}
.bottom
{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background:rgba(0, 255,0);
transform: rotateX(90deg) translateZ(-150px);
}
<div class="cube">
<div class="top"></div>
<div class="bottom"></div>
<div class="sides">
<span class=front style="--i:0;">0</span>
<span class=left style="--i:1;">1</span>
<span class=back style="--i:2;">2</span>
<span class=right style="--i:3;">3</span>
</div>
</div>

How to make progression bar to change color after reaching 100%?

I have some problem about JavaScript and using if in it. I have some experiences in PHP, but this is another world for me. I need to do something like this: I have "progress bar" with two buttons (+ and -), when I press button the value in function will change +- 0.1 which move the bar and change %.
I want to change to color of the progress bar when it's more then 100%. I tried to make another fill called filler with 0 rotate. When x is 1 or more then rotate depends on value2 = y + 0.1 per click. It works, but with 2 + buttons and I want it to only with one. If(x>1) doesn't work with document.write.
images:
demo:
https://jsfiddle.net/dmytxja2
var x = 0;
var y = 0;
const gaugeElement = document.querySelector(".gauge");
function setGaugeValue(gauge, value) {
if (value < 0 || value > 3) {
return;
}
gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${0}turn)`;
value2 = y;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${value2 / 2}turn)`;
gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
}
setGaugeValue(gaugeElement, x);
if (x >= 1) {
var cc = document.getElementById('outer');
cc.style.visibility = "visible";
}
document.write('<button id="iner" onclick="setGaugeValue(gaugeElement, x = x + 0.1)">+</button>');
document.write('<button id="outer" hidden="hidden" onclick="setGaugeValue(gaugeElement, y = y + 0.1)">+</button>');
document.write('<button onclick="setGaugeValue(gaugeElement, x = x - 0.1)">-</button>');
document.write('<button onclick="alert(x);">test</button>');
.gauge {
width: 100%;
max-width: 250px;
font-family: "Roboto", sans-serif;
font-size: 32px;
color: #004033;
}
.gauge__body {
width: 100%;
height: 0;
padding-bottom: 50%;
background: #b4c0be;
position: relative;
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
overflow: hidden;
}
.gauge__fill {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: red;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__filler {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: green;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__cover {
width: 75%;
height: 150%;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
/* Text */
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__filler"></div>
<div class="gauge__cover"></div>
</div>
</div>

You must enter the condition inside the function to be checked each time the function is called
In your code, the condition is only checked for the first time, and because the result is false, it does not change
You have also assigned the hidden parameter to the button with the outer id
But when displaying outer you use style.visibility which has no effect
Your modified code:
var x = 0;
var y = 0;
const gaugeElement = document.querySelector(".gauge");
function setGaugeValue(gauge, value) {
if (value < 0 || value > 3) {
return;
}
gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${0}turn)`;
value2 = y;
gauge.querySelector(".gauge__filler").style.transform = `rotate(${value2 / 2}turn)`;
gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
if (x >= 1) {
var cc = document.getElementById('outer');
cc.style.display = "inline";
}
}
setGaugeValue(gaugeElement, x);
document.write('<button id="iner" onclick="setGaugeValue(gaugeElement, x = x + 0.1)">+</button>');
document.write('<button id="outer" style="display:none;" onclick="setGaugeValue(gaugeElement, y = y + 0.1)">+</button>');
document.write('<button onclick="setGaugeValue(gaugeElement, x = x - 0.1)">-</button>');
document.write('<button onclick="alert(x);">test</button>');
.gauge {
width: 100%;
max-width: 250px;
font-family: "Roboto", sans-serif;
font-size: 32px;
color: #004033;
}
.gauge__body {
width: 100%;
height: 0;
padding-bottom: 50%;
background: #b4c0be;
position: relative;
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
overflow: hidden;
}
.gauge__fill {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: red;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__filler {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: green;
transform-origin: center top;
transform: rotate(0.25turn);
transition: transform 0.2s ease-out;
}
.gauge__cover {
width: 75%;
height: 150%;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
/* Text */
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__filler"></div>
<div class="gauge__cover"></div>
</div>
</div>
BUT:
This code is very, very bad
As far as I realized
You wanted to make something like this
My Code :
var x = 0;
var deg = 0;
const gaugeElement = document.querySelector(".gauge");
const gauge__fill = gaugeElement.querySelector(".gauge__fill");
const gauge__cover = document.querySelector(".gauge__cover");
function setGaugeValue(btn) {
if (x >= 0) {
if (gauge__fill.style.transform == "rotate(180deg)" && btn == 'plus') {
deg = 0;
}
if (gauge__fill.style.transform == "rotate(18deg)" && btn == 'minus' && x != 0) {
deg = 180;
} else {
if (btn == 'plus') {
deg += 18;
} else {
deg -= 18;
}
}
gauge__fill.style.transform = 'rotate(' + deg + 'deg)';
gauge__cover.textContent = `${x * 10}%`;
if (x >= 11) {
gauge__fill.style.background = "green";
} else {
gauge__fill.style.background = "red";
}
}
}
document.getElementById("plus").addEventListener("click", function() {
x += 1;
setGaugeValue('plus');
});
document.getElementById("minus").addEventListener("click", function() {
if (x > 0) {
x -= 1;
setGaugeValue('minus');
}
});
document.getElementById("test").addEventListener("click", function() {
alert(x);
});
.gauge {
width: 100%;
max-width: 250px;
font-family: "Roboto", sans-serif;
font-size: 32px;
color: #004033;
}
.gauge__body {
width: 100%;
height: 0;
padding-bottom: 50%;
background: #b4c0be;
position: relative;
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
overflow: hidden;
}
.gauge__fill {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
background: red;
transform-origin: center top;
transition: transform 0.2s ease-out;
}
.gauge__cover {
width: 75%;
height: 150%;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
/* Text */
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="real.css">
<title>Nutriadapt</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__cover">0%</div>
</div>
</div>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="test">test</button>
</body>
</html>

Problems trying to animate my objects in jquery

I am trying to make my character move diagonally. My aim is to make him move towards the door depending on which door I click. There are two doors on the screen; top-left door and top-right door. Right now when I click on the top-left door he moves towards that door, but when I click on the top-right door he moves straight. I don't know where I'm going wrong with this and I could really use some help.
Here is the code that I have so far:
$(document).ready(function() {
//center the character
function centreThing(obj) {
//this is the height and width of heartless
h = $(obj).height();
w = $(obj).width();
$(obj).css({
//this is the height and width of the stage
//height and width of stage by 2 - height and width of heartless by 2
top: $('#stage').height() / 2 - h / 2,
left: $('#stage').width() / 2 - w / 2,
right: $('#stage').width() / 2 - w / 2
})
}
centreThing('#character');
//speech
var progress = 0;
var txt;
//click the door to go to next page
//animate character to the left door
$('#door1').click(function() {
$('#character').animate({
top: 0,
left: 150
}, {
duration: 1000,
complete: function() {
alert("entered");
}
});
});
//click the door to go to next page
//animate character to the right door
$('#door2').click(function() {
$('#character').animate({
top: 0,
right: 150
}, {
duration: 1000,
complete: function() {
alert("entered");
}
});
});
}); // do not delete this line
#character {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 99;
}
#door1 {
background-image: url("https://placehold.it/50x50?text=closeddoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
z-index: 5;
}
#door1:hover {
background-image: url("https://placehold.it/50x50?text=opendoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
}
#door2 {
background-image: url("https://placehold.it/50x50?text=closeddoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
}
#door2:hover {
background-image: url("https://placehold.it/50x50?text=opendoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
z-index: 5;
}
#stage {
position: relative;
width: 720px;
height: 480px;
margin: auto;
margin-top: 100px;
background-color: black;
border-style: solid;
border-width: 5px;
border-color: white;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="stage">
<img src="https://placehold.it/50x50?text=character" id="character" class="center">
<div id='door1'></div>
<div id='door2'></div>
</div>
</body>
</html>

Try it like this.Reset the left position on clicking the #door2.It happens baecause you have set the left position of the character in centreThing().So on clicking the #door2 the character has left,right and top value.So it is starting at the left value.I have removed the left value on clicking on #door2 and it worked
$(document).ready(function() {
//center the character
function centreThing(obj) {
//this is the height and width of heartless
h = $(obj).height();
w = $(obj).width();
$(obj).css({
//this is the height and width of the stage
//height and width of stage by 2 - height and width of heartless by 2
top: $('#stage').height()/2-h/2,
left: $('#stage').width()/2-w/2,
right: $('#stage').width()/2-w/2
})
}
centreThing('#character');
//speech
var progress = 0;
var txt;
//click the door to go to next page
//animate character to the left door
$('#door1').click(function() {
$('#character').animate({
top: 0,
left: 150
}, {
duration: 1000,
complete: function() {
alert("entered");
}
});
});
//click the door to go to next page
//animate character to the right door
$('#door2').click(function() {
$('#character').css({
'left':''
}).animate({
top: 0,
right: 150
}, {
duration: 1000,
complete: function() {
alert("entered on 2");
}
});
});
}); // do not delete this line
#character {
position: absolute;
/* bottom: 0px;
left: 0px;
right: 0px;*/
z-index: 99;
}
#door1 {
background:#F00;
background-image: url(images/closeddoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
z-index: 5;
}
#door1:hover {
background-image: url(images/opendoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
}
#door2 {
background:#FF0;
background-image: url(images/closeddoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
}
#door2:hover {
background-image: url(images/opendoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
z-index: 5;
}
#stage {
position: relative;
width: 720px;
height: 480px;
margin: auto;
margin-top: 100px;
background-color: black;
border-style: solid;
border-width: 5px;
border-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<link href="styles.css" rel="stylesheet" />
<script src="jquery-3.1.1.min.js"></script>
<script>
</script>
</head>
<body>
<div id="stage">
<img src="images/character.png" id="character" class="center">
<div id='door1'></div>
<div id='door2'></div>
</div>
</body>
</html>

Emulating the LinkedIn "profile strength" meter

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

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>

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>

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>

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>

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>

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

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>