Tried to improve Jack Rimell's demo code at http://jackrimell.co.uk/how-to-create-flat-preloaders-in-css-using-keyframes-part-one/.
*Note to self, do this with 1 element using box-shadows.
A Pen by Codrin Pavel on CodePen.
Created
September 27, 2022 10:33
-
-
Save lies/ffe3bb0684af2c5481557c1dac3c5241 to your computer and use it in GitHub Desktop.
Flat Preloader (keyframes demo)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="load"> | |
| <hr/><hr/><hr/><hr/> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Variation on Jack Rimell's demo. | |
| https://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. | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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%)} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment