1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
-
- .preloader {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background: #49a9ee;
- z-index: 9999;
- transition: opacity .65s;
- }
- .cs-loader {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- }
- .cs-loader-inner {
- transform: translateY(-50%);
- top: 50%;
- position: absolute;
- width: 100%;
- color: #fff;
- text-align: center;
- }
- .cs-loader-inner label {
- font-size: 20px;
- opacity: 0;
- display: inline-block
- }
- .cs-loader-inner label:nth-child(6) {
- animation: lol 3s infinite ease-in-out
- }
- .cs-loader-inner label:nth-child(5) {
- animation: lol 3s .1s infinite ease-in-out
- }
- .cs-loader-inner label:nth-child(4) {
- animation: lol 3s .2s infinite ease-in-out
- }
- .cs-loader-inner label:nth-child(3) {
- animation: lol 3s .3s infinite ease-in-out
- }
- .cs-loader-inner label:nth-child(2) {
- animation: lol 3s .4s infinite ease-in-out;
- }
- .cs-loader-inner label:nth-child(1) {
- animation: lol 3s .5s infinite ease-in-out
- }
- @keyframes lol {
- 0% {
- opacity: 0;
- transform: translateX(-300px)
- }
- 33% {
- opacity: 1;
- transform: translateX(0)
- }
- 66% {
- opacity: 1;
- transform: translateX(0)
- }
- 100% {
- opacity: 0;
- transform: translateX(300px)
- }
- }
|