diff options
| author | s1nical <[email protected]> | 2019-08-27 09:47:00 -0700 |
|---|---|---|
| committer | s1nical <[email protected]> | 2019-08-27 09:47:00 -0700 |
| commit | 1f4125e0bec252c9ec2fd7c8adbafa0eddc6813a (patch) | |
| tree | d78e15d602ba16979d0d63550b232d0796e713a2 /about/css/loader-animation.css | |
| parent | add /development page (diff) | |
| download | s1n.pw-admin-1f4125e0bec252c9ec2fd7c8adbafa0eddc6813a.tar.xz s1n.pw-admin-1f4125e0bec252c9ec2fd7c8adbafa0eddc6813a.zip | |
add about and various performance fixes
- add about page
- divide up main javascript file into multiple child proccess.
Diffstat (limited to 'about/css/loader-animation.css')
| -rw-r--r-- | about/css/loader-animation.css | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/about/css/loader-animation.css b/about/css/loader-animation.css new file mode 100644 index 0000000..ab09bc7 --- /dev/null +++ b/about/css/loader-animation.css @@ -0,0 +1,121 @@ +/* LOADING ANIMATION */ +/* body { +** text-align: center; +** padding-top: 20%; +** background: #fdfdfd; +** } +*/ +.loader-wrapper { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #fdfdfd; + 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; +} + +.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 |