Wires Loading Animation
How do I make an wires loading animation?
What is a wires loading animation? How do you make a wires loading animation? This script and codes were developed by Andy Merskin on 10 August 2022, Wednesday.
Wires Loading Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wires Loading Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"></div>
<svg version="1.1" id="wireslogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="162px" height="81px" viewBox="0 0 162 81" enable-background="new 0 0 162 81" xml:space="preserve"> <defs> <filter id="motion-blur"> <feGaussianBlur class="blur" stdDeviation="0 0"></feGaussianBlur> </filter> </defs>
<line class="line3" fill="none" stroke="#B9C4C2" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="117" y1="72" x2="153" y2="9"/>
<line class="line2" fill="none" stroke="#B9C4C2" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="81" y1="9" x2="117" y2="72"/>
<line class="line1" fill="none" stroke="#B9C4C2" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="45" y1="72" x2="81" y2="9"/>
<line class="line0" fill="none" stroke="#B9C4C2" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="9" y1="9" x2="45" y2="72"/>
<g class="circle0"> <path fill="#788D86" d="M9,2.4c3.6,0,6.6,3,6.6,6.6s-3,6.6-6.6,6.6c-3.6,0-6.6-3-6.6-6.6S5.4,2.4,9,2.4 M9,0C4,0,0,4,0,9s4,9,9,9 c5,0,9-4,9-9S14,0,9,0L9,0z"/> <path fill="#FFFFFF" d="M9,2.4c3.6,0,6.6,3,6.6,6.6s-3,6.6-6.6,6.6c-3.6,0-6.6-3-6.6-6.6S5.4,2.4,9,2.4"/>
</g>
<g class="circle1"> <path fill="#788D86" d="M45,65.4c3.6,0,6.6,3,6.6,6.6c0,3.6-3,6.6-6.6,6.6c-3.6,0-6.6-3-6.6-6.6C38.4,68.4,41.4,65.4,45,65.4 M45,63c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S50,63,45,63L45,63z"/> <path fill="#FFFFFF" d="M45,65.4c3.6,0,6.6,3,6.6,6.6c0,3.6-3,6.6-6.6,6.6c-3.6,0-6.6-3-6.6-6.6C38.4,68.4,41.4,65.4,45,65.4"/>
</g>
<g class="circle2"> <path fill="#788D86" d="M81,2.4c3.6,0,6.6,3,6.6,6.6s-3,6.6-6.6,6.6s-6.6-3-6.6-6.6S77.4,2.4,81,2.4 M81,0c-5,0-9,4-9,9s4,9,9,9 s9-4,9-9S86,0,81,0L81,0z"/> <path fill="#FFFFFF" d="M81,2.4c3.6,0,6.6,3,6.6,6.6s-3,6.6-6.6,6.6s-6.6-3-6.6-6.6S77.4,2.4,81,2.4"/>
</g>
<g class="circle3"> <path fill="#788D86" d="M117,65.4c3.6,0,6.6,3,6.6,6.6c0,3.6-3,6.6-6.6,6.6c-3.6,0-6.6-3-6.6-6.6C110.4,68.4,113.4,65.4,117,65.4 M117,63c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S122,63,117,63L117,63z"/> <path fill="#FFFFFF" d="M117,65.4c3.6,0,6.6,3,6.6,6.6c0,3.6-3,6.6-6.6,6.6c-3.6,0-6.6-3-6.6-6.6C110.4,68.4,113.4,65.4,117,65.4" />
</g>
<g class="circle4"> <path fill="#788D86" d="M153,2.4c3.6,0,6.6,3,6.6,6.6s-3,6.6-6.6,6.6s-6.6-3-6.6-6.6S149.4,2.4,153,2.4 M153,0c-5,0-9,4-9,9 s4,9,9,9s9-4,9-9S158,0,153,0L153,0z"/> <path fill="#FFFFFF" d="M153,2.4c3.6,0,6.6,3,6.6,6.6s-3,6.6-6.6,6.6s-6.6-3-6.6-6.6S149.4,2.4,153,2.4"/>
</g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TimelineMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wires Loading Animation - Script Codes CSS Codes
body { background-color: #FCF9F6;
}
.container { padding-top: 200px; width: 500px; margin: 0 auto; /* background-color: red; */
}
#wireslogo { display: block; width: 162px; margin: 0 auto; /* background-color: blue; */
}
[class*="circle"] path { filter: url('#motion-blur');
}
Wires Loading Animation - Script Codes JS Codes
'use strict';
var logo;
var lines = [0, 0, 0, 0];
var circles = [0, 0, 0, 0, 0];
var timeline = new TimelineMax({ repeat: -1, repeatDelay: 0.3 });
$(document).ready(function () { logo = Snap('#wireslogo'); // lines var _lines = {}; lines.forEach(function (item, i) { _lines['line' + i] = logo.select('.line' + i); }); lines = _lines; // circles var _circles = {}; circles.forEach(function (item, i) { _circles['circle' + i] = logo.select('.circle' + i); }); circles = _circles; $('.container').append(logo.node); go();
});
var lineKeyframesTo = [{ line0: { y1: 72 } }, { line0: { y2: 9 }, line1: { y1: 9 } }, { line1: { y2: 72 }, line2: { y1: 72 } }, { line2: { y2: 9 }, line3: { y1: 9 } }, { line3: { y2: 72 } }];
var circleKeyframesTo = [{ circle0: { y: 63 } }, { circle1: { y: -63 } }, { circle2: { y: 63 } }, { circle3: { y: -63 } }, { circle4: { y: 63 } }];
function go() { var _delay = 0.05; var duration = 0.6; var easing = Sine.easeInOut; lineKeyframesTo.forEach(function (tween, i) { var delay = _delay * i; Object.keys(tween).forEach(function (key) { timeline.add(TweenMax.to(lines[key].node, duration, { attr: tween[key], ease: easing, yoyo: true, repeat: -1 }), delay); }); }); circleKeyframesTo.forEach(function (tween, i) { var delay = _delay * i; Object.keys(tween).forEach(function (key) { timeline.add(TweenMax.to(circles[key].node, duration, $.extend(tween[key], { ease: easing, yoyo: true, repeat: -1 })), delay); }); }); var blur = { x: 0, y: 0 }; TweenMax.to(blur, duration / 2, { y: 2, yoyo: true, repeat: -1, onUpdate: onUpdateHandler }); var filter = $('.blur'); function onUpdateHandler() { filter[0].setAttribute('stdDeviation', blur.x + " " + blur.y); }
}
Developer | Andy Merskin |
Username | andymerskin |
Uploaded | August 10, 2022 |
Rating | 3 |
Size | 3,813 Kb |
Views | 36,432 |
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!
Name | Size |
Spotr - Basic Example | 3,875 Kb |
Vue List Transitions - Bug Test | 2,741 Kb |
Typtic for OSX - Night Mode | 3,443 Kb |
Vue.js Starter | 1,268 Kb |
Text Antialiasing Differences | 2,725 Kb |
SASS Easings | 2,426 Kb |
A Pen by Andy Merskin | 4,844 Kb |
Vue.js Intro Demo | 2,077 Kb |
Wires Loading Animation | 3,813 Kb |
GSS Transitions | 2,097 Kb |
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!
Name | Username | Size |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
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. Hide Your IP Now!