Iron Man SVG Loading Animation
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 - 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;}
}
Developer | Andy Thayer |
Username | andythayer |
Uploaded | October 13, 2022 |
Rating | 3.5 |
Size | 3,069 Kb |
Views | 10,120 |
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 |
A Pen by Andy Thayer | 3,007 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 |
Two column of responsive height | Fixie | 2,908 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Carousel Test | Sbirchall | 1,509 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
CSS Variables | Jdsteinbach | 4,759 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!