First Loading Animation
How do I make an first loading animation?
I have seen many amazing loading animations in my time of website scanning. And needless to say, I've been completely impressed and envious. This is simply my mockup to try and be something like those amazing ones I've seen.. What is a first loading animation? How do you make a first loading animation? This script and codes were developed by Saysora on 26 August 2022, Friday.
First Loading Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>First Loading Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="loading">
<div id="innerText" class="flip">∴</div>
<div class="circle ani-spin"></div>
</div>
<div class="load"> <h2>...Loading...</h2>
</div> <script src="js/index.js"></script>
</body>
</html>
First Loading Animation - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
html { font-family: "Helvetica";
}
body { background: #3f3f3f;
}
.load { position: absolute; left: 0; top: 55%; width: 100%; text-align: center; text-indent: -15px; color: #e74c3c;
}
.load h2 { font-weight: 100;
}
#loading { width: 100px; height: 100px; border-radius: 100%; position: relative; position: absolute; left: 45.5%; top: 20%;
}
.circle { background: none; width: 100px; height: 100px; border: 2px solid transparent; border-radius: 100%; border-color: #e74c3c transparent transparent; position: absolute; overflow: hidden;
}
#innerText { position: absolute; color: #e74c3c; height: 106px; width: 106px; text-align: center; line-height: 80px; font-size: 5em;
}
.flip { -webkit-animation: rolling 3s linear 0s infinite normal; -moz-animation: rolling 3s linear 0s infinite normal; -o-animation: rolling 3s linear 0s infinite normal; animation: rolling 3s linear 0s infinite normal;
}
.ani-spin { -webkit-animation: spin 1.5s linear 0s infinite normal; -moz-animation: spin 1.5s linear 0s infinite normal; -o-animation: spin 1.5s linear 0s infinite normal; animation: spin 1.5s linear 0s infinite normal;
}
@-webkit-keyframes rolling { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rolling { 0% { -moz-transform: rotate(0); } 100% { -moztransform: rotate(360deg); }
}
@-o-keyframes rolling { 0% { -o-transform: rotate(0); } 100% { -o-transform: rotate(360deg); }
}
@keyframes rolling { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin { 0% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes spin { 0% { -o-transform: rotate(0); } 100% { -o-transform: rotate(360deg); }
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
First Loading Animation - Script Codes JS Codes
/*
First Loading Animation I've made.
*/
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 2,886 Kb |
Views | 30,360 |
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 |
Landscape Animation | 3,469 Kb |
Ralph Lauren Mimic | 3,067 Kb |
CSS Tab Holder | 3,445 Kb |
Info Cards | 3,926 Kb |
Grow Circle Animation | 2,075 Kb |
Value vs Placeholder | 2,244 Kb |
Life Mottos | 3,352 Kb |
Legend of Zelda - Triforce | 2,530 Kb |
Service Card Animation | 3,567 Kb |
Flat Ui Rollover Buttons | 3,312 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 |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Weather App 2 | MightyJoeW | 2,877 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Canvas snow | Win7killer | 2,572 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!