文单阅读

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS螺旋式扩散的Loading加载动画</title>
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">

  
  
<style>
    body {
 background-color: #FFFCF9;
 overflow: hidden;
 text-align:center;

}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;

}
</style>

  
</head>

<body>

  <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
  
   <line class="mark" x1="0" y1="0" x2="0" y2="0" fill="none" stroke="#5BB4D8" stroke-miterlimit="10" stroke-linecap="none" stroke-width="12"/>
    
   </defs>
 <g class="container1"/>
 <g class="container2"/>

</svg>
  <script src='./TweenMax.min.js'></script>


<script>
    var 
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  }, 
    mark = select('.mark'),
    num = 18,
    step = 360/num,
    container1 = select('.container1'),
    container2 = select('.container2'),
    mainTl,
    count = 0
  

TweenMax.set('svg', {
  visibility: 'visible'
})


mainTl = new TimelineMax({});



function makeDial(container, radius, alpha){
 var angle, clone, point, tl, cloneLabel;
 
 for(var i = 0; i < num; i++){
  angle = step * i;
  clone = mark.cloneNode(true);
  container.appendChild(clone);
  point = {
    x: (Math.cos(angle * Math.PI / 180) * radius) + 400,
    y: (Math.sin(angle * Math.PI / 180) * radius) + 300
  } 
  TweenMax.set(clone, {
   x:point.x,
   y:point.y,
   rotation: angle,
   alpha:alpha
  })
  
  tl = new TimelineMax({repeat:-1});
  tl.to(clone, 1, {
   attr:{
    x2:60
   },
   ease:Power3.easeInOut
  })
.to(clone, 2, {
   attr:{
    x1:80,
    x2:80
   },
   ease:Power1.easeInOut
  })

  mainTl.add(tl, count/10)
  count++;
 }

}

makeDial(container1, 33, 0.3)
makeDial(container2, 33, 1)

TweenMax.set([container2, container1], {
 transformOrigin:'50% 50%'
})


mainTl.timeScale(2)
</script>


<div style="text-align:center;clear:both">
<script>
    document.write ('<div style="display:none"><script language="javascript" type="text/javascript" src="//js.users.51.la/16741667.js"></script></div>');
document.write ('<div style="display:none"><script language="javascript" type="text/javascript" src="//js.users.51.la/17278758.js"></script></div>');

document.writeln('<style type="text/css">.source-url{font-size:15px;text-align:center}</style>');
</script>
</div>

</body>

</html>
CSS螺旋式扩散的Loading加载动画