Iron Man SVG Loading Animation

Developer
Andy Thayer
Size
3,069 Kb
Views
10,115

How do I make an iron man svg loading animation?

Having more fun with SVG line animations, if this were to be used it would probably best be situated as a loading animation.. What is a iron man svg loading animation? How do you make a iron man svg loading animation? This script and codes were developed by Andy Thayer on 13 October 2022, Thursday.

Iron Man SVG Loading Animation Previews
IQ Test

Iron Man SVG Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Iron Man SVG Loading Animation</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {	background-color:#fff;
}
svg {	margin: auto;	position: absolute;	top:0;	left:0;	bottom:0;	right:0;
}
.path {	stroke-dashoffset:1940;	stroke-dasharray:1940;	-webkit-animation: draw 10s ease-in-out infinite; -moz-animation: draw 10s ease-in-out infinite; animation: draw 10s ease-in-out infinite;	fill-opacity: 0;
}
.one { animation-delay: 0s;
}
.two { animation-delay: 2s;
}
.three { animation-delay: 4s;
}
@-webkit-keyframes draw {	30%{fill-opacity: 0;}	31%{fill-opacity: 1;}	32%{fill-opacity: 0;}	33%{fill-opacity: 1;}	34%{fill-opacity: 0;}	35%{fill-opacity: 1;}	50%{stroke-dashoffset:0;}	90%{stroke-dashoffset:0; fill-opacity: 1;}
}
@-moz-keyframes draw {	30%{fill-opacity: 0;}	31%{fill-opacity: 1;}	32%{fill-opacity: 0;}	33%{fill-opacity: 1;}	34%{fill-opacity: 0;}	35%{fill-opacity: 1;}	50%{stroke-dashoffset:0;}	90%{stroke-dashoffset:0; fill-opacity: 1;}
}
@keyframes draw {	30%{fill-opacity: 0;}	31%{fill-opacity: 1;}	32%{fill-opacity: 0;}	33%{fill-opacity: 1;}	34%{fill-opacity: 0;}	35%{fill-opacity: 1;}	50%{stroke-dashoffset:0;}	90%{stroke-dashoffset:0; fill-opacity: 1;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<g id="Group" stroke="rgb(180,20,20)" stroke-width="2" fill="none"><!--CHANGE LINE COLOUR-->
<path fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" class="path" d="M428.233,458.734h-79.242l11.32,52.827	c0,8.336-6.758,15.094-15.093,15.094H216.922c-8.335,0-15.093-6.758-15.093-15.094l11.32-52.827H24.479	c-8.336,0-15.094-6.759-15.094-15.095V88.94c0-8.335,6.757-15.094,15.094-15.094h513.183c8.336,0,15.095,6.758,15.095,15.094	v120.749"/>
<polyline class="path" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" points="428.233,379.492 32.025,379.492	32.025,96.487 530.115,96.487 530.115,209.689 "/>
<circle class="path" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" cx="281.07" cy="413.453" r="11.32"/>
<rect class="path" x="54.666" y="119.127" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="124.522" height="33.96"/>
<rect class="path" x="462.193" y="119.127" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="33.961" height="33.96"/>
<rect class="path" x="54.666" y="209.689" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="350.926" height="33.96"/>
<rect class="path" x="54.666" y="266.29" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="350.926" height="33.96"/>
<rect class="path" x="179.188" y="322.892" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="101.882" height="31.131"/>
<rect class="path" x="54.666" y="322.892" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="101.882" height="31.131"/>
<rect class="path" x="303.711" y="322.892" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="101.881" height="31.131"/>
<path class="path" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M665.958,511.562	c0,8.336-6.758,15.094-15.094,15.094H443.327c-8.336,0-15.094-6.758-15.094-15.094V224.783c0-8.335,6.758-15.094,15.094-15.094	h207.537c8.336,0,15.094,6.758,15.094,15.094V511.562z"/>
<path class="path" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M790.48,509.676c0,9.376-7.604,16.979-16.98,16.979	h-67.922c-9.376,0-16.979-7.604-16.979-16.979V378.077c0-9.376,7.604-16.98,16.979-16.98H773.5c9.376,0,16.98,7.604,16.98,16.98	V509.676z"/>
<rect class="path" x="450.874" y="232.33" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="192.443" height="249.045"/>
<rect class="path" x="701.333" y="373.832" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="76.412" height="114.617"/>
<circle class="path" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" cx="547.096" cy="498.354" r="5.66"/>
<circle class="path" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" cx="739.539" cy="502.6" r="5.66"/>
<rect class="path" x="462.193" y="246.479" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="60.253" height="32.323"/>
<rect class="path" x="606.824" y="246.479" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="22.593" height="32.323"/>
<rect class="path" x="462.193" y="332.678" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="169.804" height="32.322"/>
<rect class="path" x="462.193" y="386.551" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="169.804" height="32.323"/>
<rect class="path" x="522.446" y="440.425" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="49.298" height="29.629"/>
<rect class="path" x="462.193" y="440.425" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="49.298" height="29.629"/>
<rect class="path" x="582.7" y="440.425" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="49.297" height="29.629"/>
<rect class="path" x="714.069" y="386.567" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="25.47" height="12.735"/>
<rect class="path" x="752.274" y="386.567" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="12.736" height="12.735"/>
<rect class="path" x="714.069" y="412.038" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="50.941" height="12.735"/>
<rect class="path" x="714.069" y="437.508" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="50.941" height="12.736"/>
<rect class="path" x="714.069" y="462.979" fill="none" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="50.941" height="12.734"/>
</g>
</svg>
</body>
</html>

Iron Man SVG Loading Animation - Script Codes CSS Codes

body {	background-color:#fff;
}
svg {	margin: auto;	position: absolute;	top:0;	left:0;	bottom:0;	right:0;
}
.path {	stroke-dashoffset:1940;	stroke-dasharray:1940;	-webkit-animation: draw 10s ease-in-out infinite; -moz-animation: draw 10s ease-in-out infinite; animation: draw 10s ease-in-out infinite;	fill-opacity: 0;
}
.one { animation-delay: 0s;
}
.two { animation-delay: 2s;
}
.three { animation-delay: 4s;
}
@-webkit-keyframes draw {	30%{fill-opacity: 0;}	31%{fill-opacity: 1;}	32%{fill-opacity: 0;}	33%{fill-opacity: 1;}	34%{fill-opacity: 0;}	35%{fill-opacity: 1;}	50%{stroke-dashoffset:0;}	90%{stroke-dashoffset:0; fill-opacity: 1;}
}
@-moz-keyframes draw {	30%{fill-opacity: 0;}	31%{fill-opacity: 1;}	32%{fill-opacity: 0;}	33%{fill-opacity: 1;}	34%{fill-opacity: 0;}	35%{fill-opacity: 1;}	50%{stroke-dashoffset:0;}	90%{stroke-dashoffset:0; fill-opacity: 1;}
}
@keyframes draw {	30%{fill-opacity: 0;}	31%{fill-opacity: 1;}	32%{fill-opacity: 0;}	33%{fill-opacity: 1;}	34%{fill-opacity: 0;}	35%{fill-opacity: 1;}	50%{stroke-dashoffset:0;}	90%{stroke-dashoffset:0; fill-opacity: 1;}
}
Iron Man SVG Loading Animation - Script Codes
Iron Man SVG Loading Animation - Script Codes
Home Page Home
Developer Andy Thayer
Username andythayer
Uploaded October 13, 2022
Rating 3.5
Size 3,069 Kb
Views 10,115
Do you need developer help for Iron Man SVG Loading Animation?

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!

Andy Thayer (andythayer) Script Codes
Name
A Pen by Andy Thayer
Create amazing love letters with AI!

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!