Flat Preloader (keyframes demo)

Developer
Size
2,557 Kb
Views
80,960

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) Previews

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.
*/
Flat Preloader (keyframes demo) - Script Codes
Flat Preloader (keyframes demo) - Script Codes
Home Page Home
Developer ZeroSpree
Username zerospree
Uploaded July 13, 2022
Rating 4.5
Size 2,557 Kb
Views 80,960
Do you need developer help for Flat Preloader (keyframes demo)?

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!

ZeroSpree (zerospree) Script Codes
Create amazing blog posts 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!