SVG is very powerful in drawing vector graphics for web pages, and even some vector animations are quite good. This time, I will share with you a spirally spreading loading animation based on SVG and JavaScript. This loading animation is very suitable for waiting animation when the page loads.
Advertisement
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;
}
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({});
Advertisement
