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 17 November 2021, Wednesday.

How do I make an timelinemax circular loader?
  1. TimelineMax Circular loader Previews
  2. TimelineMax Circular loader HTML Codes
  3. TimelineMax Circular loader CSS Codes
  4. TimelineMax Circular loader JS Codes
TimelineMax Circular loader Previews

TimelineMax Circular loader 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 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 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);
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.