This post is saved as a draft.
#e8e8e8
1.loader { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 position: relative; 6} 7 8.out-1 { 9 position: absolute; 10 width: 4em; 11 height: 4em; 12 border-radius: 100%; 13 border: 0.2em solid transparent; 14 border-top-color: rgb(43, 226, 83); 15 animation: rec 2s infinite; 16 transition: all ease-in-out 0.3s; 17} 18 19.out-2 { 20 position: absolute; 21 width: 4em; 22 height: 4em; 23 border-radius: 100%; 24 border: 0.2em solid transparent; 25 border-left-color: rgb(226, 223, 43); 26 animation: rec 2s infinite; 27 transition: all ease-in-out 0.3s; 28} 29 30.out-3 { 31 position: absolute; 32 width: 4em; 33 height: 4em; 34 border-radius: 100%; 35 border: 0.2em solid transparent; 36 border-bottom-color: rgb(51, 105, 252); 37 animation: rec 2s infinite; 38 transition: all ease-in-out 0.3s; 39} 40 41.in { 42 position: absolute; 43 border-radius: 100%; 44 border: 0.2em solid rgba(43, 226, 83, 0.11); 45 width: 4em; 46 height: 4em; 47 transition: all ease-in-out 0.3s; 48} 49 50@keyframes rec { 51 0% { 52 transform: rotate(360deg); 53 } 54}
Variation of aloader
Variation of aloader