Last active
July 8, 2016 10:39
-
-
Save dimosr/b1b98bec49888d616cb7c180ea33061c to your computer and use it in GitHub Desktop.
HTML Simple Loader
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
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://code.jquery.com/jquery-3.0.0.js"></script> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <div id="loader"> | |
| <div></div> | |
| </div> | |
| </body> | |
| </html> |
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
| function showLoader() { | |
| $("#loader").show() | |
| } | |
| function hideLoader() { | |
| $("#loader").hide() | |
| } | |
| /* Used to execute asynchronous processing, showing loader during the execution */ | |
| function executeAsyncProcessWithLoader(callbackFn) { | |
| showLoader(); | |
| callbackFn(); | |
| hideLoader(); | |
| } | |
| /* Used to execute synchronous processing, showing loader during the execution */ | |
| function executeSyncProcessWithLoader(callbackFn) { | |
| showLoader(); | |
| setTimeout(function() { | |
| callbackFn(); | |
| hideLoader(); | |
| }, 50); | |
| } |
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
| #loader{ | |
| opacity: 0.5; | |
| background: #000; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 10; | |
| display: none; | |
| } | |
| #loader > div{ | |
| position: fixed; | |
| width: 120px; | |
| height: 120px; | |
| left: 40%; | |
| top: 40%; | |
| border: 16px solid #f3f3f3; /* Light grey */ | |
| border-top: 16px solid #3498db; /* Blue */ | |
| border-radius: 50%; | |
| animation: spin 2s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment