Icon Loading Animation

Developer
Kira
Size
2,934 Kb
Views
34,408
  1. Icon Loading Animation Previews
  2. Icon Loading Animation HTML Codes
  3. Icon Loading Animation CSS Codes
  4. Icon Loading Animation JS Codes

How do I make an icon loading animation?

What is a icon loading animation? How do you make a icon loading animation? This script and codes were developed by Kira on 14 October 2022, Friday.

Icon Loading Animation Previews
IQ Test

Icon Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon Loading Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Add to <head> -->
<div class="loading-animation">	<div class="overlay"></div>	<div class="loading-animation__element">	<span>	<svg width="62px" height="134px" viewBox="0 0 62 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch --> <title>Fill 1</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M49.847,0.001 C41.743,0.001 38.119,7.216 35.864,13.516 L0,133.931 L30.508,104.789 L61.6,0.001 L49.847,0.001 Z" id="Fill-1" fill="#F7E712"></path> </g>	</svg>	</span> <span>	<svg width="47px" height="83px" viewBox="0 0 47 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch --> <title>Page 1</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M46.268,0 L34.516,0 C26.413,0 22.789,7.215 20.537,13.501 L0,82.985 L30.102,54.34 L30.049,54.576 L46.168,0.337 L46.268,0 Z" fill="#F7E712"></path> </g>	</svg> </span> <span>	<svg width="35px" height="33px" viewBox="0 0 35 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch --> <title>Fill 3</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M6.007,13.513 L0.261,32.587 L34.913,0 L19.989,0 C11.886,0 8.262,7.214 6.007,13.513" id="Fill-3" fill="#F7E712"></path> </g>	</svg> </span>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Icon Loading Animation - Script Codes CSS Codes

.overlay { background: black; position: absolute; height: 100vh; width: 100%; top: 0; left: 0;
}
.loading-animation__element { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
.loading-animation__element span { float: left; -webkit-animation: spin 1.5s infinite; -moz-animation: spin 1.5s infinite; animation: spin 1.5s infinite; margin-right: -10px;
}
.loading-animation__element span:nth-child(2) { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; margin-right: 5px;
}
.loading-animation__element span:nth-child(3) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;
}
@-moz-keyframes spin { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes spin { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes spin { 0% { opacity: 0; } 100% { opacity: 1; }
}

Icon Loading Animation - Script Codes JS Codes

// Sitewide JS
$(window).load(function() {	$(".loading-animation").delay(1200).fadeOut('slow');
});
$( document ).ready(function() { console.log( "ready!" );
});
Icon Loading Animation - Script Codes
Icon Loading Animation - Script Codes
Home Page Home
Developer Kira
Username kepixels
Uploaded October 14, 2022
Rating 3
Size 2,934 Kb
Views 34,408
Do you need developer help for Icon 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!

Kira (kepixels) Script Codes
Name
Mode Menu
Fluid Grid
Simple Modal
Sticky CTA Buttons
Blog Images Sized and Centered
A Pen by Kira
Rotated Text
Dashed Lines
Control Shape Hero
Grid Box Animated Navigation
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!