|
- @import "colors.less";
-
- @font-face {
- font-family: bitty;
- src: url('../fonts/bitty.otf');
- }
-
- .loader-container {
- width: 100vw;
- height: 100vh;
-
- .loader {
- animation: loader-spin 1s linear infinite;
- height: 10px;
- width: 10px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateXY(-50%, -50%);
- }
-
- .loader-text {
- position: absolute;
- top: calc(50% + 75px);
- width: 100%;
- text-align: center;
- color: @white;
- font-size: 24px;
- }
-
- @keyframes loader-spin {
- 0% {
- box-shadow: 0px -30px @blueD, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @white, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- 6.25% {
- box-shadow: 0px -30px transparent, 10px -30px @blueD, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @white, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- 12.5% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px @blueD, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @white, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- 18.75% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px @blueD, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @white, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- 25% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px @blueD, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @white, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- 31.25% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px @blueD, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @white, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- 37.5% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px @blueD, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @white, -20px -20px transparent, -10px -30px transparent;
- }
-
- 43.75% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px @blueD, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @white, -10px -30px transparent;
- }
-
- 50% {
- box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px @blueD, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @white;
- }
-
- 56.25% {
- box-shadow: 0px -30px @white, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px @blueD, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
- }
-
- 62.5% {
- box-shadow: 0px -30px @blueA, 10px -30px @white, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px @blueD, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
- }
-
- 68.75% {
- box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @white, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px @blueD, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
- }
-
- 75% {
- box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @white, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px @blueD, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
- }
-
- 81.25% {
- box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @white, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px @blueD, -20px -20px @blueA, -10px -30px @blueA;
- }
-
- 87.5% {
- box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @white, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px @blueD, -10px -30px @blueA;
- }
-
- 93.75% {
- box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @white, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px @blueD;
- }
-
- 100% {
- box-shadow: 0px -30px @blueD, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @white, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
- }
-
- }
-
- }
|