Flat Preloader (keyframes demo)
How do I make an flat preloader (keyframes demo)?
Tried to improve Jack Rimell's demo code at http://jackrimell.co.uk/how-to-create-flat-preloaders-in-css-using-keyframes-part-one/.. What is a flat preloader (keyframes demo)? How do you make a flat preloader (keyframes demo)? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.
Flat Preloader (keyframes demo) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Preloader (keyframes demo)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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:#ECF0F1}
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); /*change these sizes to fit into your project*/ width:100px; height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}
@keyframes spin{ 0%,100%{transform:translate(0)} 25%{transform:translate(160%)} 50%{transform:translate(160%, 160%)} 75%{transform:translate(0, 160%)}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="load"> <hr/><hr/><hr/><hr/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flat Preloader (keyframes demo) - Script Codes CSS Codes
body{background:#ECF0F1}
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); /*change these sizes to fit into your project*/ width:100px; height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}
@keyframes spin{ 0%,100%{transform:translate(0)} 25%{transform:translate(160%)} 50%{transform:translate(160%, 160%)} 75%{transform:translate(0, 160%)}
}
Flat Preloader (keyframes demo) - Script Codes JS Codes
/*
Variation on Jack Rimell's demo.
http://jackrimell.co.uk/how-to-create-flat-preloaders-in-css-using-keyframes-part-one/
Wanted to:
- write less code,
- animate with transforms rather than absolute positioning,
- be able to scale it easily.
*/
Developer | ZeroSpree |
Username | zerospree |
Uploaded | July 13, 2022 |
Rating | 4.5 |
Size | 2,557 Kb |
Views | 80,960 |
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 |
Pure CSS Apple Logo | 6,592 Kb |
Simple CSS3 particles animation | 2,810 Kb |
SCSS Bowser from box-shadows | 17,079 Kb |
Flip - card memory game. | 7,947 Kb |
Waving Santa | 4,614 Kb |
Just another Button | 2,413 Kb |
Mr. C | 20,483 Kb |
CRT monitors pattern | 1,737 Kb |
Steve Jobs | 4,968 Kb |
Single element animated CSS3 T-Rex | 2,064 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 |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
STIKHOI | Denmch | 7,122 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
CubeTronic | Jurbank | 3,716 Kb |
Chuck Norris Background | Manz | 1,967 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!