TimelineMax Circular loader

Developer
Nicolaj Lund Nielsen
Size
2,649 Kb
Views
26,299

How do I make an timelinemax circular loader?

Circular loader made from rotating spans within divs with overflow:hidden. All covered by a circular mask. What is a timelinemax circular loader? How do you make a timelinemax circular loader? This script and codes were developed by Nicolaj Lund Nielsen on 13 September 2022, Tuesday.

TimelineMax Circular loader Previews
IQ Test

TimelineMax Circular loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TimelineMax Circular loader</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="load-circle"> <div class="c1"><span></span></div> <div class="c2"><span></span></div> <div class="c3"><span></span></div> <div class="c4"><span></span></div> <div class="mask"></div> </div> <div id="slider"></div> <div id="buttons"> <button onclick="play();">Play</button> <button onclick="pause();">Pause</button> <button onclick="resume();">Resume</button> <button onclick="restart();">Restart</button> <button onclick="reverse();">Reverse</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

TimelineMax Circular loader - Script Codes CSS Codes

body{ background-color:#000;
}
#container { width:400px; margin:0 auto;
}
#load-circle, #load-circle * { -webkid-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
#load-circle { position:relative; width:80px; height:80px; margin-bottom:20px; /* Make circle */ border-radius:50%; overflow:hidden;
}
#buttons { margin:0 auto 10px;
}
#load-circle div { position:absolute; overflow:hidden; /*background:#bada55;*/ width:40px; height:40px;
}
#load-circle span { position:relative; display:block; top:0; width:40px; height:40px; background:#bada11; z-index:1;
}
.c1 {top:0;left:40px;}
.c2 {top:40px;left:40px;}
.c3 {top:40px;left:0;}
.c4 {top:0; left:0;}
#load-circle .mask { position:relative; top:5px; left:5px; width:70px; height:70px; z-index:100; border:0; background-color:#000; /* Make circle */ border-radius:50%; overflow:hidden;
}
#slider{	width: 300px; height:5px;	margin:12px 0; background-color:#bada11; border:1px solid rgba(0,0,0,0.3);
}
#slider .ui-slider-handle { border-radius:50%; border:1px solid rgba(0,0,0,0.3); top:-10px; box-shadow:inset -4px -6px 4px rgba(0,0,0,0.2);
}

TimelineMax Circular loader - Script Codes JS Codes

var tl = new TimelineLite({ onUpdate: updateSlider
});
tl.from("#load-circle .c1 span", 2.5, { shortRotation: -90, transformOrigin: "0 40px", ease: Linear.easeNone }) .from("#load-circle .c2 span", 2.5, { shortRotation: -90, transformOrigin: "0 0", ease: Linear.easeNone }) .from("#load-circle .c3 span", 2.5, { shortRotation: -90, transformOrigin: "40px 0", ease: Linear.easeNone }) .from("#load-circle .c4 span", 2.5, { shortRotation: -90, transformOrigin: "40px 40px", ease: Linear.easeNone })
tl.play();
tl.timeScale(10);
function play() { tl.play();
}
function pause() { tl.pause();
}
function resume() { tl.resume();
}
function restart() { tl.restart();
}
function reverse() { tl.reverse();
}
$("#slider").slider({ range: false, height: "2px", min: 0, max: 100, step: .1, slide: function(event, ui) { tl.pause(); //adjust the timeline's progress() based on slider value tl.progress(ui.value / 100); }
});
function updateSlider() { $("#slider").slider("value", tl.progress() * 100);
}
TimelineMax Circular loader - Script Codes
TimelineMax Circular loader - Script Codes
Home Page Home
Developer Nicolaj Lund Nielsen
Username nicolund
Uploaded September 13, 2022
Rating 3
Size 2,649 Kb
Views 26,299
Do you need developer help for TimelineMax Circular loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nicolaj Lund Nielsen (nicolund) Script Codes
Name
FrameByFrame CSS animation
Tweenmax Integer Tween
TweenMax staggerTo worm
TweenMax transformOrigin Bubble
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!