CSS3 & JavaScript
Created
November 20, 2019 03:45
-
-
Save b0c0de/27ad9ab6bf4bfac7b5c0a0d86976c2b6 to your computer and use it in GitHub Desktop.
Animation Loading Page / 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
| <body onload="loader()"> | |
| <h1>Animation Loading Page</h1> | |
| <div id="Loading"> | |
| <div></div> | |
| </div> | |
| </body> |
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 loader(){ | |
| loader = setTimeout(showPage, 36000) | |
| } | |
| function showPage(){ | |
| document.getElementById("Loading").style.display = "none" | |
| } |
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
| @charset "utf8"; | |
| *,*:after,*:before,html{box-sizing:border-box} | |
| body{margin:0;padding:0} | |
| h1{ | |
| font-family:font-family:Tahoma,Geneva,sans-serif; | |
| font-style:normal; | |
| font-weight:700; | |
| font-size:32px | |
| } | |
| h1,#Loading>div{ | |
| top:50%; | |
| left:50%; | |
| display:block; | |
| position:absolute; | |
| transform:translate(-50%,-50%) | |
| } | |
| #Loading{ | |
| background:#000; | |
| width:100%; | |
| height:100%; | |
| display:block; | |
| position:absolute; | |
| z-index:999 | |
| } | |
| #Loading>div{width:200px;height:200px} | |
| #Loading>div:before,#Loading>div:after{ | |
| content:""; | |
| display:block; | |
| position:absolute; | |
| border-radius:50%; | |
| border:4px solid red; | |
| border-top-color:blue | |
| } | |
| #Loading>div:before{width:100%;height:100%;animation:loading 5s linear infinite} | |
| #Loading>div:after{ | |
| width:150px; | |
| height:150px; | |
| top:25px; | |
| left:25px; | |
| animation:loading 5s linear infinite reverse | |
| } | |
| @keyframes loading{ | |
| from{transform:rotate(0deg)} | |
| to{transform:rotate(360deg)} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment