diff options
| author | s1n <[email protected]> | 2019-11-04 20:50:40 -0800 |
|---|---|---|
| committer | s1n <[email protected]> | 2019-11-04 20:50:40 -0800 |
| commit | 7675cb322b7a21f55b7f28e0f8e281829e3484be (patch) | |
| tree | c29d38b231f7fde823eb8a0883b827b04ae65521 /links | |
| parent | add /links (diff) | |
| download | s1n.pw-admin-7675cb322b7a21f55b7f28e0f8e281829e3484be.tar.xz s1n.pw-admin-7675cb322b7a21f55b7f28e0f8e281829e3484be.zip | |
add loader
Diffstat (limited to 'links')
| -rw-r--r-- | links/css/main.css | 119 | ||||
| -rw-r--r-- | links/index.html | 22 |
2 files changed, 140 insertions, 1 deletions
diff --git a/links/css/main.css b/links/css/main.css index b63ba70..18f382f 100644 --- a/links/css/main.css +++ b/links/css/main.css @@ -8,7 +8,7 @@ left: 0; right: 0; text-align: center; - z-index: 999999; + z-index: 1; } a:hover { @@ -46,4 +46,121 @@ a { filter: brightness(42.5%); top: 50%; left: 50% +} + +/* Loader */ +.loader-wrapper { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: black; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 2; +} + +.loader { + width: 100px; + height: 100px; + display: inline-table; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + border-spacing: 0.3em; +} + +.loader row { + display: table-row; +} + +.loader row span { + display: table-cell; + position: relative; + background: #1d1f20; + opacity: 0; + -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate; + animation: flicker 0.5985999999999999s ease-out infinite alternate; + /* Added standard property to fix compatbiliy issues */ +} + +@-webkit-keyframes flicker { + + from, + 20% { + opacity: 0; + } + + 100%, + to { + opacity: 1; + } +} + +@keyframes flicker { + + /* Added standard property to fix compatbiliy issues */ + from, + 20% { + opacity: 0; + } + + 100%, + to { + opacity: 1; + } +} + +.loader row:nth-child(1) span:nth-child(1) { + -webkit-animation-delay: .50s; + animation-delay: .50s; +} + +/* Added standard property to fix compatbiliy issues */ +.loader row:nth-child(1) span:nth-child(2) { + -webkit-animation-delay: .70s; + animation-delay: .70s; +} + +.loader row:nth-child(1) span:nth-child(3) { + -webkit-animation-delay: .60s; + animation-delay: .60s; +} + +.loader row:nth-child(2) span:nth-child(1) { + -webkit-animation-delay: .20s; + animation-delay: .20s; +} + +.loader row:nth-child(2) span:nth-child(2) { + -webkit-animation-delay: .80s; + animation-delay: .80s; +} + +.loader row:nth-child(2) span:nth-child(3) { + -webkit-animation-delay: .90s; + animation-delay: .90s; +} + +.loader row:nth-child(3) span:nth-child(1) { + -webkit-animation-delay: .10s; + animation-delay: .10s; +} + +.loader row:nth-child(3) span:nth-child(2) { + -webkit-animation-delay: .30s; + animation-delay: .30s; +} + +.loader row:nth-child(3) span:nth-child(3) { + -webkit-animation-delay: .40s; + animation-delay: .40s; }
\ No newline at end of file diff --git a/links/index.html b/links/index.html index 95b39e3..7c43989 100644 --- a/links/index.html +++ b/links/index.html @@ -13,6 +13,7 @@ <!-- External Libraries --> <!-- Invisible Script Links --> <script src="/js/hide-context-menu.js"></script> + <script src="/js/background-sparkles.js"></script> </head> <body> @@ -34,6 +35,27 @@ video.volume = 0.1; </script> </video> + + <!-- Loading Animation --> + <div class="loader-wrapper"> + <div class="loader"> + <row> + <span></span> + <span></span> + <span></span> + </row> + <row> + <span></span> + <span></span> + <span></span> + </row> + <row> + <span></span> + <span></span> + <span></span> + </row> + </div> + </div> </body> </html>
\ No newline at end of file |