Created
May 5, 2022 13:30
-
-
Save denysvega/4fc0dd72aa824df966f01e7fcc20c241 to your computer and use it in GitHub Desktop.
Simple Loading Indicator
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Loading Indicator</title> | |
| <meta name="description" content="A simple loading indicator" /> | |
| <meta name="author" content="Denys Vega" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> | |
| </head> | |
| <body> | |
| <div class="loader-container"> | |
| <div class="loader"></div> | |
| </div> | |
| <style> | |
| .loader-container { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .loader { | |
| width: 3em; | |
| height: 3em; | |
| border-radius: 50%; | |
| border: 3px solid #98b8fdaa; | |
| border-top: 4px solid #4574da; | |
| -webkit-animation: spin 1s linear infinite; | |
| animation: rotate 1s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes rotate { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment