Little loader
How do I make an little loader?
Little experiment to make a css loader. What is a little loader? How do you make a little loader? This script and codes were developed by Jaflo on 12 September 2022, Monday.
Little loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Little loader</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! */ #loader { border: 1px solid black; width: 100px; height: 100px; margin: 40px auto; overflow: hidden;
}
#loader > div { background: black; width: 10px; height: 100px; transform-origin: top center; animation: load 2.5s infinite linear;
}
@keyframes load { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); margin-left: -5px; margin-top: 0; transform-origin: top center; } 50% { margin-left: -5px; margin-top: 95px; transform-origin: top center; transform: rotate(-90deg); } 75% { margin-left: 95px; margin-top: 0; transform-origin: bottom center; transform: rotate(0deg); } 100% { transform: rotate(0deg); transform-origin: bottom center; margin-left: 0; margin-top: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="loader"> <div></div>
</div>
</body>
</html>
Little loader - Script Codes CSS Codes
#loader { border: 1px solid black; width: 100px; height: 100px; margin: 40px auto; overflow: hidden;
}
#loader > div { background: black; width: 10px; height: 100px; transform-origin: top center; animation: load 2.5s infinite linear;
}
@keyframes load { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); margin-left: -5px; margin-top: 0; transform-origin: top center; } 50% { margin-left: -5px; margin-top: 95px; transform-origin: top center; transform: rotate(-90deg); } 75% { margin-left: 95px; margin-top: 0; transform-origin: bottom center; transform: rotate(0deg); } 100% { transform: rotate(0deg); transform-origin: bottom center; margin-left: 0; margin-top: 0; }
}
Developer | Jaflo |
Username | jaflo |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 1,979 Kb |
Views | 12,144 |
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 |
Wobble menu change animation | 2,443 Kb |
Nice flat icon | 2,956 Kb |
Cloud upload | 2,774 Kb |
Shopping cart | 4,412 Kb |
Icon wiggle animation | 2,169 Kb |
Scroll bar manipulation | 2,344 Kb |
Styled calendar | 7,526 Kb |
Resizable mail icon | 2,826 Kb |
Dialogue boxes | 3,897 Kb |
A Pen by jaflo | 2,066 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 |
React Template | Isac | 1,241 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Shape Outside - Polygon | Stacy | 3,954 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!