1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | #vue-loading { width : 100% ; height : 100% ; position : absolute ; left : 0 ; top : 0 } .loader { position : relative ; width : 2.5em ; height : 2.5em ; transform: rotate( 165 deg); } .loader:before, .loader:after { content : '' ; position : absolute ; top : 50% ; left : 50% ; display : block ; width : 0.5em ; height : 0.5em ; border-radius: 0.25em ; transform: translate( -50% , -50% ); } .loader:before { animation: before 2 s infinite; } .loader:after { animation: after 2 s infinite; } @keyframes before { 0% { width : 0.5em ; box-shadow: 1em -0.5em rgba( 225 , 20 , 98 , 0.75 ), -1em 0.5em rgba( 111 , 202 , 220 , 0.75 ); } 35% { width : 2.5em ; box-shadow: 0 -0.5em rgba( 225 , 20 , 98 , 0.75 ), 0 0.5em rgba( 111 , 202 , 220 , 0.75 ); } 70% { width : 0.5em ; box-shadow: -1em -0.5em rgba( 225 , 20 , 98 , 0.75 ), 1em 0.5em rgba( 111 , 202 , 220 , 0.75 ); } 100% { box-shadow: 1em -0.5em rgba( 225 , 20 , 98 , 0.75 ), -1em 0.5em rgba( 111 , 202 , 220 , 0.75 ); } } @keyframes after { 0% { height : 0.5em ; box-shadow: 0.5em 1em rgba( 61 , 184 , 143 , 0.75 ), -0.5em -1em rgba( 233 , 169 , 32 , 0.75 ); } 35% { height : 2.5em ; box-shadow: 0.5em 0 rgba( 61 , 184 , 143 , 0.75 ), -0.5em 0 rgba( 233 , 169 , 32 , 0.75 ); } 70% { height : 0.5em ; box-shadow: 0.5em -1em rgba( 61 , 184 , 143 , 0.75 ), -0.5em 1em rgba( 233 , 169 , 32 , 0.75 ); } 100% { box-shadow: 0.5em 1em rgba( 61 , 184 , 143 , 0.75 ), -0.5em -1em rgba( 233 , 169 , 32 , 0.75 ); } } /** * Attempt to center the whole thing! */ html, body { height : 100% ; } .loader { position : absolute ; top : calc( 50% - 1.25em ); left : calc( 50% - 1.25em ); } |