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