I am having difficulty converting this working greensock animation into an angular animation. Can anyone suggest how I can do this? This was going to be tied to an angular modal wizard so this does need to be an angular animation.
I was hoping to add an animation class to the html that could be used by the javascript. I don't care if it is addClass/removeClass, enter/leave, etc. I have tried a few times and I am having difficulty coming up with a fairly simple solution.
function percentToPixel(perc) {
return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}
var cursor = document.getElementById('cursor'),
step1 = document.getElementById('joinModalNavStep1'),
step2 = document.getElementById('joinModalNavStep2'),
step3 = document.getElementById('joinModalNavStep3'),
step4 = document.getElementById('joinModalNavStep4'),
step5 = document.getElementById('joinModalNavStep5');
TweenMax.set(cursor, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step1, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step2, {
x: percentToPixel("25") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step3, {
x: percentToPixel("50") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step4, {
x: percentToPixel("75") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step5, {
x: percentToPixel("100") + "px",
xPercent: -50,
yPercent: -50
});
var tlStepNavAnimation = new TimelineMax({
paused: true
});
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("25") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("50") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("75") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("100") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
$("#nextBtn").on("click", navigateToNextStep);
$("#previousBtn").on("click", navigateToPreviousStep);
function navigateToNextStep() {
tlStepNavAnimation.play();
}
function navigateToPreviousStep() {
tlStepNavAnimation.reverse();
}
html,
body {
overflow: hidden;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
.stepNavContainer {
position: relative;
height: 50px;
width: 50%;
left: 25%;
border: 1px solid red;
}
.circle {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
#cursor {
display: block;
position: absolute;
width: 50px;
height: 50px;
background: #c32026;
border-radius: 50%;
}
.step {
background: #999999;
}
.btn {
width: 100px;
height: 50px;
border: 1px solid black;
}
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="previousBtn" class="btn">
<span>Previous</span>
</div>
<div id="nextBtn" class="btn">
<span>Next</span>
</div>
<div class="stepNavContainer">
<span id="joinModalNavStep1" class="circle step"></span>
<span id="joinModalNavStep2" class="circle step"></span>
<span id="joinModalNavStep3" class="circle step"></span>
<span id="joinModalNavStep4" class="circle step"></span>
<span id="joinModalNavStep5" class="circle step"></span>
<span id="cursor" class="circle"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
I am using ScrollMagic's section wipes to fade one panel into the next on scroll, this works perfect but I was wondering if it is possible to snap to the next panel while scrolling (now if you stop scrolling you are half faded between the two panels).
I know I could use fullpage.js since they offer exactly that effect but I rather don't add another library to my already heavy javascript loaded website and i'm wondering if I could not get that same effect with ScrollMagic.
var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".panel2", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel3", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel4", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone});
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "100%"
})
.setPin("#slider")
.setTween(wipeAnimation1)
.addTo(controller);
* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
text-align:center;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
text-align:center;
}
.panel {
height: 100%;
width: 100%;
position: absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer">spacer</div>
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="spacer">spacer</div>
So Jan Paepke from ScrollMagic helped to come up with a solution. It basically comes down to unlinking the animation from the scroll and to initiate/animate each panel by itself working with triggers.
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "700%"
})
.setPin("#slider")
.addTo(controller);
var panels = [
{
trigger: '#trigger2',
name: '.panel2'
},
{
trigger: '#trigger3',
name: '.panel3'
},
{
trigger: '#trigger4',
name: '.panel4'
}
]
for (var i=0; i<panels.length; i++) {
var panel = panels[i];
new ScrollMagic.Scene({
triggerElement: panel.trigger,
triggerHook: 0
})
.setTween(new TimelineMax()
.fromTo(panel.name, 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone}))
.addTo(controller);
}
* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
}
#trigger2 {
position: absolute;
top: 100vh;
}
#trigger3 {
position: absolute;
top: 300vh;
}
#trigger4 {
position: absolute;
top: 500vh;
}
#sliderwrapper {
position: relative;
height: auto;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
}
.panel {
height: 100vh;
width: 100%;
position:absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer"></div>
<div id="sliderwrapper">
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="trigger2"></div>
<div id="trigger3"></div>
<div id="trigger4"></div>
</div>
<div id="spacer"></div>
I have something like browser game.
On click user throw dices. Dices fall through shadow, but there are different block and dice has z-index : 3 and shadow z-index : 2;
This problem only on iOS.
For animation use library anime.js.
Maybe someone had the same problem.
Try to add screenshot for show the problem:
.dice {
width: 144px;
height: 144px;
left: -200px;
top: -450px;
z-index: 3;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translateZ(-72px) rotateX(313deg) rotateY(226deg) scale3d(0.35, 0.35, 0.35);
z-index: 3;
.cube_face {
width: 144px;
height: 143px;
border: 1px solid #f5f3e6;
border-radius: 15px;
}
}
<div class="diceShadow"></div>
<div class="dice">
<div class="cube_face cube_face_front"></div>
<div class="cube_face cube_face_back big-shadow"></div>
<div class="cube_face cube_face_right"></div>
<div class="cube_face cube_face_left shadow"></div>
<div class="cube_face cube_face_top"></div>
<div class="cube_face cube_face_bottom"></div>
</div>
anime({
targets: dices[count],
left: [{
value: '-200px',
duration: 0
},
{
value: dicePositions[count].x - 56,
duration: duration / 2,
easing: 'easeInCubic'
},
{
value: dicePositions[count].x + 15,
duration: duration / 10,
easing: 'easeOutQuad'
},
{
value: dicePositions[count].x + 30,
duration: duration / 10,
easing: 'easeInQuad'
},
{
value: dicePositions[count].x + 84,
duration: duration / 5,
easing: 'easeOutQuad'
},
],
top: [{
value: '-850px',
duration: 0
},
{
value: dicePositions[count].y - 30,
duration: duration / 2,
easing: 'easeInCubic'
},
{
value: dicePositions[count].y - 95,
duration: duration / 10,
easing: 'easeOutQuad'
},
{
value: dicePositions[count].y + 10,
duration: duration / 10,
easing: 'easeInQuad'
},
{
value: dicePositions[count].y + 50,
duration: duration / 5,
easing: 'easeOutQuad'
},
],
translateZ: [{
value: '-72px',
duration: 0
}, ],
rotateX: [{
value: dicePositions[count].rotateX + 132,
duration: 0
},
{
value: dicePositions[count].rotateX + 32,
duration: duration / 2,
easing: 'easeInOutQuad'
},
{
value: dicePositions[count].rotateX,
duration: duration / 4,
delay: duration / 10,
easing: 'easeOutCubic',
},
],
rotateY: [{
value: dicePositions[count].rotateY - 100,
duration: 0
},
{
value: dicePositions[count].rotateY - 39,
duration: duration / 2,
easing: 'easeInOutQuad'
},
{
value: dicePositions[count].rotateY,
duration: duration / 4,
delay: duration / 10,
easing: 'easeOutQuad',
},
],
rotateZ: [{
value: dicePositions[count].rotateZ,
duration: 0
}, ],
scaleX: [{
value: 0.35,
duration: 0
}, ],
scaleY: [{
value: 0.35,
duration: 0
}, ],
scaleZ: [{
value: 0.35,
duration: 0
}, ],
});
Problem solved! I had DOM elements that were outside parent`s block. When I positioned them to parent block area and add opacity, to hide them - my dices fell into place.
Example:
were :
#train {
width: 158px;
height: 146px;
transition: all 0.4s ease-in;
background: url('../img/train.png') no-repeat center;
background-size: cover;
&[data-show='false'] {
left: -100%;
top: -100%;
}
&[data-show='true'] {
left: 9%;
top: 14%;
}
}
now:
#train {
width: 158px;
height: 146px;
transition: all 0.4s ease-in;
background: url('../img/train.png') no-repeat center;
background-size: cover;
&[data-show='false'] {
left: 0%;
top: 17px;
opacity: 0;
}
&[data-show='true'] {
left: 9%;
top: 14%;
opacity: 1;
}
}
there Stack Overflow community. I'm sure there's just something simple that I am missing but for the life of me I cannot figure out what it is.
I have a simple animation that is just transposing some divs. The animation runs and everything but I am getting some weird behaviour that I am not sure exactly why it is.
In my jQuery, there is a method show_dots(integer milliseconds). The only thing this function does is to call $.toggle() on the 4 elements that I am animating. I would like the function to behave like this. The page is loaded, the 4 elements are not visible. They become visible and then the animation runs.
When I include a method call to show_dots before the animation, the dots do not appear and the animation runs(I opened up the dev tools of the browser and I can see the values changing). Just for the hell of it, I threw in a method call to show dots AFTER the animation.
In that case, the behaviour was... the page loaded (the dots were visible), the animation ran, and then the dots disappeared after the method call. I'm not certain why this is the behaviour.
I've also tried animating the capacity to no avail. I'm not sure why it isn't working but I'm not sure where to start. I'm sure it's just some inherent feature that I'm unaware of, but thus far, I'm not sure what it is
Code is as follows:
let tl = $("#square-animation-div-tl");
let tr = $("#square-animation-div-tr");
let bl = $("#square-animation-div-bl");
let br = $("#square-animation-div-br");
$(window).on('load', function() {
animation_loop(1300, tl, tr, bl, br);
$("#journey-link").on("click", pause_animation);
});
function show_dots(dur) {
tl.toggle(250);
tr.toggle(250);
bl.toggle(250);
br.toggle(250);
};
function animation_loop(dur, tl, tr, bl, br) {
//toggle_dots(250) //this line does not make the dots toggle in or out
tl.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
left: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
tr.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
top: -12,
borderRadius: "50%"
}, dur)
.animate({
right: -12,
borderRadius: "0%"
}, dur);
bl.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
bottom: -12,
borderRadius: "50%"
}, dur)
.animate({
left: -12,
borderRadius: "0%"
}, dur);
br.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
right: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
toggle_dots(250);
//animation_loop(dur,tl,tr,bl,br);
};
.square-animation-container {
width: 100%;
height: 100%;
z-index: 3;
}
.square-animation-div {
height: 24px;
max-height: 24px;
min-height: 24px;
width: 24px;
max-width: 24px;
min-width: 24px;
z-index: 2;
position: absolute;
}
#square-animation-div-tl {
top: -12px;
left: -12px;
background-color: blue;
}
#square-animation-div-tr {
top: -12px;
right: -12px;
background-color: white;
}
#square-animation-div-bl {
bottom: -12px;
left: -12px;
background-color: white;
}
#square-animation-div-br {
bottom: -12px;
right: -12px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square-animation-container">
<div id="square-animation-div-tl" class="square-animation-div">
</div>
<div id="square-animation-div-tr" class="square-animation-div">
</div>
<div id="square-animation-div-bl" class="square-animation-div ">
</div>
<div id="square-animation-div-br" class="square-animation-div ">
</div>
</div>
I am creating a simple animation banner type thing that just displays a few strings and an image. I had it working then I changed some variable names around and can't seem to find why it is not working.
https://jsfiddle.net/06uto8av/3/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 200%;
}
#container {
width: 700px;
height: 400px;
background-color: black;
margin: 40px auto;
position: relative;
overflow: hidden;
opacity: 0;
}
.quote {
font-size: 3em;
font-weight: bold;
position: absolute;
width: 600px;
text-align: center;
top: 60px;
left: 0px;
color: crimson;
text-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}
#img {
top: 60px;
}
img {
position: relative;
width:620px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="quote" id="quote1">Thirsty?</div>
<div class="quote" id="quote2">Love beer?</div>
<div class="quote" id="quote3">Well look no further!</div>
<div class="quote" id="quote4">Come on down to...</div>
<div class="quote" id="quote5">Steve's Bar!</div>
<div class="quote" id="img"><img src="img/stevebar.jpg" alt="steve bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
<script>
var idContainer = document.getElementById("container");
var idQuote1 = document.getElementById("quote1");
var idQuote2 = document.getElementById("quote2");
var idQuote3 = document.getElementById("quote3");
var idQuote4 = document.getElementById("quote4");
var idQuote5 = document.getElementById("quote5");
var idImg = document.getElementById("img");
var tl1 = new TimelineLite();
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
</script>
</body>
</html>
You're missing a comma ;) see: https://jsfiddle.net/0Le94gsL/
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2, 1, {delay: 1, x: 1000, ease:Back.easeIn }) // You needed a comma here just after idQuote2
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
I am using the jquery circle progress library. I need to have the full progress represent as 100%, however the actual value placed on is 150%.
I need to change the colour of that extra 50%.
Here is the HTML:
<div id="circle"></div>
Here is the JS:
$('#circle').circleProgress({
value: 1.50,
size: 100,
fill: { color: "#ff1e41" }
});
The following is a fiddle: https://jsfiddle.net/2pekq9zw/
How can I change the colour of that extra 50% ?
This is not exactly what you want (because you can't use number > 1 in the value), but the final view is what you are looking for:
https://jsfiddle.net/vz9dr78a/2/
I created two circles that overlap each other, the first is 100% and the second is 50%.
Once the animation of the first circle is done - the animation of the second circle will start:
$('#circle1').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
}).on('circle-animation-end', function() {
$('#circle2').circleProgress({
value: 0.5,
size: 100,
fill: { color: "#00ff00" },
emptyFill: 'rgba(0, 0, 0, 0)'
})
});
here is a snippet:
$('#circle1').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
}).one('circle-animation-end', function() {
$('#circle2').circleProgress({
value: 0.5,
size: 100,
fill: { color: "#00ff00" },
emptyFill: 'rgba(0, 0, 0, 0)'
})
});
.circle-container {
position: relative;
}
.circle-container .circle {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div class="circle-container">
<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
</div>
Basically the same as the other attempts, though I tried to eliminate the lagging feel of the second circle starting so it feels more natural.
// js
$('#circle1').circleProgress({
value: 1,
size: 100,
animation: { duration: 1200, easing: "linear" },
fill: { color: "#ff1e41" }
});
$('#circle1').on('circle-animation-end', () => {
$('#circle2').circleProgress({
value: .50,
animation: { duration: 1200, easing: "linear"},
size: 100,
fill: { color: "#00FF00" },
emptyFill: 'rgba(0, 0, 0, 0)'
});
})
// css
#circle1 {
position: absolute;
}
#circle2 {
position: absolute;
}
// html
<div id="circle1"></div>
<div id="circle2"></div>
https://jsfiddle.net/2pekq9zw/10/
If you notice, my circles blend together a bit nicer than the other answers
By creating a second, smaller circle overlayed on the first you could show the extra, for example:
$('#circle').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
});
$('#circle2').circleProgress({
value: 0.50,
size: 94,
fill: { color: "darkred" }
});
#circle { position:absolute; top:0;left:0}
#circle2 { position:absolute;top: 3px; left: 3px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div id="circle"></div>
<div id="circle2"></div>