| | |
| | | } |
| | | } |
| | | |
| | | .loader:before, .loader:after { |
| | | .loader:before, |
| | | .loader:after { |
| | | --r: 20.5deg; |
| | | content: ""; |
| | | content: ''; |
| | | width: 320px; |
| | | height: 140px; |
| | | position: absolute; |
| | |
| | | width: 200px; |
| | | height: 200px; |
| | | background: var(--primary); |
| | | background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%); |
| | | background: linear-gradient( |
| | | 45deg, |
| | | var(--primary) 0%, |
| | | var(--primary) 50%, |
| | | var(--primary-light) 50%, |
| | | var(--primary-light) 100% |
| | | ); |
| | | transform-style: preserve-3d; |
| | | -webkit-animation: ground var(--duration) linear forwards infinite; |
| | | animation: ground var(--duration) linear forwards infinite; |
| | | } |
| | | |
| | | .loader .ground div:before, .loader .ground div:after { |
| | | .loader .ground div:before, |
| | | .loader .ground div:after { |
| | | --rx: 90deg; |
| | | --ry: 0deg; |
| | | --x: 44px; |
| | | --y: 162px; |
| | | --z: -50px; |
| | | content: ""; |
| | | content: ''; |
| | | width: 156px; |
| | | height: 300px; |
| | | opacity: 0; |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | .loader .box div:before, .loader .box div:after { |
| | | .loader .box div:before, |
| | | .loader .box div:after { |
| | | --rx: 90deg; |
| | | --ry: 0deg; |
| | | --z: 24px; |
| | | --y: -24px; |
| | | --x: 0; |
| | | content: ""; |
| | | content: ''; |
| | | position: absolute; |
| | | background-color: inherit; |
| | | width: inherit; |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 25%, 52% { |
| | | 25%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 25%, 52% { |
| | | 25%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 14%, 100% { |
| | | 14%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 14%, 100% { |
| | | 14%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 29%, 52% { |
| | | 29%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 29%, 52% { |
| | | 29%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 18%, 100% { |
| | | 18%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 18%, 100% { |
| | | 18%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 33%, 52% { |
| | | 33%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 33%, 52% { |
| | | 33%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 22%, 100% { |
| | | 22%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 22%, 100% { |
| | | 22%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 37%, 52% { |
| | | 37%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 37%, 52% { |
| | | 37%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 26%, 100% { |
| | | 26%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 26%, 100% { |
| | | 26%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 41%, 52% { |
| | | 41%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 41%, 52% { |
| | | 41%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 30%, 100% { |
| | | 30%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 30%, 100% { |
| | | 30%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 45%, 52% { |
| | | 45%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 45%, 52% { |
| | | 45%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 34%, 100% { |
| | | 34%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 34%, 100% { |
| | | 34%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 49%, 52% { |
| | | 49%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 49%, 52% { |
| | | 49%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 38%, 100% { |
| | | 38%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 38%, 100% { |
| | | 38%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 53%, 52% { |
| | | 53%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: translate(var(--x), var(--y)); |
| | | } |
| | | |
| | | 53%, 52% { |
| | | 53%, |
| | | 52% { |
| | | transform: translate(0, 0); |
| | | } |
| | | |
| | |
| | | transform: translate(0, -32px); |
| | | } |
| | | |
| | | 90%, 100% { |
| | | 90%, |
| | | 100% { |
| | | transform: translate(0, 188px); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 42%, 100% { |
| | | 42%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); |
| | | } |
| | | |
| | | 42%, 100% { |
| | | 42%, |
| | | 100% { |
| | | transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); |
| | | } |
| | | } |
| | | |
| | | @-webkit-keyframes ground { |
| | | 0%, 65% { |
| | | 0%, |
| | | 65% { |
| | | transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); |
| | | } |
| | | |
| | | 75%, 90% { |
| | | 75%, |
| | | 90% { |
| | | transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | @keyframes ground { |
| | | 0%, 65% { |
| | | 0%, |
| | | 65% { |
| | | transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); |
| | | } |
| | | |
| | | 75%, 90% { |
| | | 75%, |
| | | 90% { |
| | | transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | @-webkit-keyframes ground-shine { |
| | | 0%, 70% { |
| | | 0%, |
| | | 70% { |
| | | opacity: 0; |
| | | } |
| | | |
| | | 75%, 87% { |
| | | 75%, |
| | | 87% { |
| | | opacity: 0.2; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | @keyframes ground-shine { |
| | | 0%, 70% { |
| | | 0%, |
| | | 70% { |
| | | opacity: 0; |
| | | } |
| | | |
| | | 75%, 87% { |
| | | 75%, |
| | | 87% { |
| | | opacity: 0.2; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | @-webkit-keyframes mask { |
| | | 0%, 65% { |
| | | 0%, |
| | | 65% { |
| | | opacity: 0; |
| | | } |
| | | |
| | | 66%, 100% { |
| | | 66%, |
| | | 100% { |
| | | opacity: 1; |
| | | } |
| | | } |
| | | |
| | | @keyframes mask { |
| | | 0%, 65% { |
| | | 0%, |
| | | 65% { |
| | | opacity: 0; |
| | | } |
| | | |
| | | 66%, 100% { |
| | | 66%, |
| | | 100% { |
| | | opacity: 1; |
| | | } |
| | | } |