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