I want my element center aligned until scrolling in div reached has reached end, here is my code
clamp = (value, min, max) => {
if (value < min) return min;
else if (value > max) return max;
return value;
};
const playground = document.getElementById('playground');
const viewarea = document.getElementById('viewarea');
const selfUser = document.getElementById('user1');
window.playgroundBounding = { minX: 0, maxX: playground.clientWidth, minY: 0, maxY: playground.clientHeight };
playground.onmouseup = function (e) {
if (e.button === 0) mouseClicked(e);
};
function mouseClicked(event) {
xposition = event.clientX + viewarea.scrollLeft - selfUser.offsetWidth / 2;
yposition = event.clientY + viewarea.scrollTop - selfUser.offsetHeight / 2;
xposition = clamp(xposition, window.playgroundBounding.minX, window.playgroundBounding.maxX - selfUser.offsetWidth);
yposition = clamp(yposition, window.playgroundBounding.minY, window.playgroundBounding.maxY - selfUser.offsetHeight);
$(selfUser).animate(
{
left: xposition + 'px',
top: yposition + 'px',
},
500,
'linear'
);
viewarea.scrollTo(xposition, yposition)
}
body {
margin:0;
padding:0;
}
#viewarea {
width: 100vw;
height: 100vh;
overflow: auto;
position: relative;
scroll-behavior: smooth;
transform-origin: left top;
top:0px;
left:0px;
/*overflow: hidden;*/
}
#playground {
width: 1920px;
height: 1080px;
background-image: url('https://www.tynker.com/projects/screenshot/60390c5cde3bf81ccf3101f6/erosion.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 1920px 1080px;
position: relative;
scroll-behavior: smooth;
transform: translate(0px, 0px) scale(1, 1);
left: 0px;
top:0px;
}
.avatar {
width: 50vw;
height: 50vw;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: blue;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: move;
user-select: none;
transition: transform 0.1s ease-in;
position:absolute;
}
.avatar-image {
width: 30vw;
height: 30vw;
background: url("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200") top left / cover no-repeat;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 3px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewarea">
<div id="playground">
<div class="avatar " id="user1">
<div class="avatar-image">
<div class="user-name"></div>
</div>
</div>
</div>
</div>
Now on click avatar is moving on view area, i want scrollbars to scroll vertically and horizontally nicely according to player position, or maybe player remain in center until scrollbar scrolled completely and player can touch the border.
Related
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>
I'm trying to remake hover like on this website:
https://www.samsaraubud.com/
When you hover over a button (and only button. I don't want circle over whole website), a circle appers around cursor. I tried so many solutions from codepen after typing "mouse follow" but nothing works.
I have button like this:
https://codepen.io/Aventadorrre/pen/mdyPJbv
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
Button
and how to make circle around mouse (following mouse) when i hover button?
Consider a radial-gradient as background that you make fixed then simply adjust the position based on the cursor
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 3px),
red calc(100% - 2px) calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px; /* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
If you want the circle above the text consider pseudo element and the same trick:
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background-size:0 0;
position:relative;
}
a.cursor::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side,
blue calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px;
background-position:inherit;
}
<a class="cursor" href="#">Button</a>
Updated
It shows full circle even on the boundaries of the button
const btn = document.querySelector(".button")
const circle = document.querySelector(".circle")
btn.onmouseenter = function() {
circle.classList.add("in")
}
btn.onmousemove = function(e) {
const {
top,
left,
width,
height
} = btn.getBoundingClientRect()
const {
clientY,
clientX
} = e
if (clientX < left || clientY < top || clientX > left + width || clientY > top + height) {
circle.classList.remove("in")
}
circle.style.top = `${clientY - top}px`
circle.style.left = `${clientX - left}px`
};
body {
margin: 20px;
padding: 20px;
}
.button {
padding: 40px 80px;
border: 1px solid grey;
color: blue;
display: inline-block;
position: relative;
}
.circle {
position: absolute;
display: none;
width: 30px;
height: 30px;
border-radius: 50%;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border: 2px solid red;
}
.circle.in {
display: block;
}
<a class="button">
Button
<span class="circle"></span>
</a>
old answer
The answer is extension of the answer by #Temani Afif.
The listener for mousemove is added on the button itself instead of the body, which would result in performance improvement since the cb is only called when you are hovering over the button.
var h = document.querySelector(".cursor");
h.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty(
"background-position",
e.clientX - 15 + "px " + (e.clientY - 15) + "px"
);
};
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background: radial-gradient( farthest-side, transparent calc(100% - 3px), red calc(100% - 2px) calc(100% - 1px), transparent 100%) fixed/* Fixed to the screen*/
no-repeat;
/* Don't repeat*/
background-size: 0px 0px;
/* by default, circle is of 0px */
}
a.cursor:hover {
background-size: 30px 30px;
/* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
You can do that with mousemove event. Catch the event and set the location of cirlce while the mouse moves.
window.addEventListener('mousemove', function(e){
document.getElementById("circle").style.display = "block";
document.getElementById("circle").style.left = e.offsetX + "px";
document.getElementById("circle").style.top = e.offsetY + "px";
});
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
#circle{
width: 30px;
height: 30px;
border: 1px solid red;
border-radius: 50%;
position: fixed;
display: none;
}
Button
<span id="circle"></span>
I want to implement ability to collapse the gray .content-wrapper block (with blue sqare inside) smoothly based on drag value when user drags .drag element. What is the best and efficient way nowadays to do this for mobile touch drag?
* {
box-sizing: border-box;
color: white;
}
.drag {
width: 50px;
height: 3px;
border-radius: 3px;
opacity: 0.3;
margin: 0 auto;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0.8) 50%, white 100%);
transition: opacity 0.4s;
}
.screen {
padding-top: 40px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
background: #2b2d5b;
width: 320px;
height: 568px;
}
.controls {
background: linear-gradient(to bottom, #fd2929, #fd5c5c);
height: 100px;
}
.drag-wrapper {
display: block;
padding: 20px;
}
.drag-wrapper:active .drag,
.drag-wrapper:hover .drag,
.drag-wrapper:focus .drag {
opacity: 0.7;
}
.board {
padding: 0 20px;
}
.content-wrapper {
padding: 20px;
height: 320px;
}
.content-wrapper {
background: #444;
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
background: linear-gradient(to bottom, #3adffd, #00abfb);
height: 100%;
}
<div class="screen">
<div class="content-wrapper">
<div class="content">
.content
</div>
</div>
<a href="javascript:void(0)" class="drag-wrapper">
<div class="drag"></div>
</a>
<div class="board">
<div class="controls"></div>
</div>
</div>
here's my implementation for this case with hammer.js
http://hammerjs.github.io
movement of the board could have more complex calculations based on e.velocityY, but I'm using quick CSS transition when pan ended which looks good for my case
$(document).ready(function() {
let sliderManager = new Hammer.Manager(document.querySelector('.drag-wrapper'));
let board = document.querySelector('.board');
let threshold = 150;
let boardTopInitial = board.style.top = board.offsetTop;
let boardTopCollaped = 30;
sliderManager.add(new Hammer.Pan({
threshold: 0,
pointers: 0
}));
sliderManager.on('pan', function(e) {
e.preventDefault();
board.classList.remove("transitable");
board.classList.add("full-height");
if (!board.classList.contains('pinned-top') && e.deltaY < 0) {
board.style.top = boardTopInitial + e.deltaY + "px";
if (e.isFinal) {
board.classList.add("transitable");
if (Math.abs(e.deltaY) > threshold) {
board.style.top = boardTopCollaped + "px";
board.classList.add("pinned-top");
} else {
board.setAttribute('style', '');
board.classList.remove("full-height");
}
}
} else if (board.classList.contains('pinned-top') && e.deltaY > 0) {
board.style.top = boardTopCollaped + e.deltaY + "px";
if (e.isFinal) {
board.classList.add("transitable");
if (Math.abs(e.deltaY) > threshold) {
board.setAttribute('style', '');
board.classList.remove("pinned-top");
board.classList.remove("full-height");
} else {
board.style.top = boardTopCollaped + "px";
board.classList.add("top");
}
}
}
})
})
* {
box-sizing: border-box;
color: white;
}
.drag {
width: 50px;
height: 3px;
border-radius: 3px;
opacity: 0.3;
margin: 0 auto;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0.8) 50%, white 100%);
transition: opacity 0.4s;
}
.pinned-top {
top: 30px;
}
.full-height {
box-shadow: none;
min-height: 100vh;
}
.transitable {
transition: top .2s ease-out;
}
.screen {
position: relative;
padding-top: 40px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
background: #2b2d5b;
width: 320px;
height: 568px;
}
.controls {
background: linear-gradient(to bottom, #fd2929, #fd5c5c);
height: 100px;
}
.drag-wrapper {
display: block;
padding: 20px;
}
.drag-wrapper:active .drag,
.drag-wrapper:hover .drag,
.drag-wrapper:focus .drag {
opacity: 0.7;
}
.board {
padding: 0 20px;
position: absolute;
background: #2b2d5b;
top: 360px;
left: 0;
right: 0;
}
.content-wrapper {
padding: 20px;
height: 320px;
}
.content-wrapper {
background: #444;
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
background: linear-gradient(to bottom, #3adffd, #00abfb);
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<div class="screen">
<div class="content-wrapper">
<div class="content">
.content
</div>
</div>
<div class="board">
<a href="javascript:void(0)" class="drag-wrapper">
<div class="drag"></div>
</a>
<div class="controls"></div>
</div>
</div>
I need get hover effect in a div from the cursor position.
I have this html and css
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<div class="f">
<div class="s"></div>
</div>
And I need something like this:
I'm open to js or jquery solutions.
EDIT
I have a jquery solution:
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
But i need the circle make the over animation like first snippet.
Original question here
To change position of inner circle you can use pageX and pageY on mousemove. To change size of inner circle you can create one class that will scale div and toggle that class on hover over .f.
var s = $('.s')
var f = $('.f')
var oTop = f.offset().top + (s.height() / 2);
var oLeft = f.offset().left + (s.width() / 2);
f.hover(function() {
s.toggleClass('change')
})
f.mousemove(function(e) {
var x = e.pageY - oTop
var y = e.pageX - oLeft
s.css({
top: x + 'px',
left: y + 'px'
})
})
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
overflow: hidden;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
position: absolute;
pointer-events: none;
opacity: 0;
transition: transform 0.5s linear, opacity 0.3s linear;
}
.change {
transform: scale(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
Here is a jQuery solution.
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
$('.f').on('mousemove', function(e){
var par = $(this);
if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
$('.s').css({
position: 'relative',
left: e.pageX - (par.width() / 2),
top: e.pageY - (par.height() / 2)
});
} else {
$('.s').css({
position: 'initial'
});
}
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
function moveInner(e)
{
var inner = document.getElementById('inner');
inner.style.top = (e.clientY-100)+"px";
inner.style.left= (e.clientX-100)+"px";
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 100px;
height: 100px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
position: absolute;
}
Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div's position
<div class="f" id="parent" onmousemove="moveInner(event)">
</div><div class="s" id="inner"></div>
var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
ctx.arc(ol_x, ol_y, 42, 0, 2 * Math.PI, false);
ctx.fillStyle='grey';
ctx.fill();
ctx.restore();
}
ol_x = e.clientX+20;
ol_y = e.clientY+20;
var ctx = me.getContext("2d");
ctx.beginPath();
ctx.arc(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
Hi this is my solution for EDIT<BR>
I use 2D context to draw inner DIV inside parent DIV
<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
</canvas>
i have a circle and i am showing some text in the middle as demonstrated in the fiddle(JSFIDDLE http://jsfiddle.net/874jgh4v/2/) My requirement is this
I need to animate the outer white border for percentage for example if the percentage is 50% then i need to show that border only around half the circle
I need to show that percentage value on hower for example the text 50% should be shown only on hower preferably with some animation.
.wrapper{padding:30px;}
.circle{
border-radius: 50%;
background:#32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width:220px;
height:220px;
box-sizing:border-box;
}
.circle:hover {
background:red;
}
<div class="wrapper">
<div class="circle">
<p>Total ROE's</p>
<p>300</p>
<p>70%</p>
</div>
</div>
Any help would be appreciated! Also i would prefer to do this without external libraries , the percentages should support decimal points upto two points.
Try this:
Html
<span class='Progress'>
<div class="Bar">
<div class="Outer">
<div class="Fill"></div>
</div>
<div class="Draw"></div>
<div class="Status"><span></span></div>
</div>
</span>
CSS
.Progress {
position: absolute;
left: 25%;
bottom: 30%;
}
.Progress .Bar {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.Progress .Bar .Outer {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 70px, 70px, 35px);
}
.Bar .Outer .Fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 35px, 70px, 0);
background: #00A0E3;
transform: rotate(60deg);
}
.Progress .Bar .Draw {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 53.84615px/2);
top: calc(50% - 53.84615px/2);
width: 53.84615px;
height: 53.84615px;
background: #fff;
text-align: center;
display: table;
}
.Progress .Bar .Status {
display: table-cell;
vertical-align: middle;
position: absolute;
margin-left: -100px;
margin-top: -10px;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
text-align: center;
}
.Progress .Bar .Status > span {
font-size: 14px;
font-weight: bold;
color: #00A0E3;
}
.Progress .Bar.halfway {
background-color: #00A0E3;
}
.Progress .Bar.halfway .Outer {
clip: rect(0, 35px, 70px, 0);
}
.Progress .Bar.halfway .Outer .Fill {
clip: rect(0, 70px, 70px, 35px);
background: #E5E5E5;
}
.Progress .Bar.complete.halfway,
.Progress .Bar.complete .Fill
{
background-color: #8cd64c !important;
}
Javascript/JQuery:
$('document').ready(function() {
var progress = function(perc) {
perc = Math.round(perc * 100) / 100; // 2 decimal places
var $bar = $('.Progress .Bar'),
$fill = $('.Progress .Bar .Outer .Fill'),
$status = $('.Progress .Bar .Status span');
$bar.removeClass("halfway").removeClass("complete");
// outer bar
if (perc >= 50) $bar.addClass("halfway");
if (perc >= 100) $bar.addClass("complete");
// progress bar
var degrees = 360 * perc / 100;
$fill.css({
"WebkitTransform": 'rotate(' + degrees + 'deg)',
"-moz-transform": 'rotate(' + degrees + 'deg)'
});
// status
$status.html(perc);
}
// Test it!
progress(10);
setTimeout(function() {
progress(50);
setTimeout(function() {
progress(100);
}, 2000);
}, 2000);
});
Show me the CodePen