diff options
Diffstat (limited to 'about/css/loader-animation.css')
| -rw-r--r-- | about/css/loader-animation.css | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/about/css/loader-animation.css b/about/css/loader-animation.css new file mode 100644 index 0000000..6e3bd1b --- /dev/null +++ b/about/css/loader-animation.css @@ -0,0 +1,122 @@ +/* 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 |