Loader by NlghtM4re
#e8e8e8
1.loader { 2 height: 120px; 3 width: 120px; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 position: relative; 8} 9 10.loader div { 11 height: 30px; 12 width: 30px; 13 position: absolute; 14 animation: move 4s infinite; 15} 16 17.loader div:nth-child(1) { 18 background-color: rgb(158, 136, 246); 19 box-shadow: rgb(158, 136, 246) 0px 7px 29px 0px; 20 transform: translate(-30px,-30px); 21 animation-delay: -1s; 22} 23 24.loader div:nth-child(2) { 25 background-color: rgb(97, 183, 253); 26 box-shadow: rgb(97, 183, 253) 0px 7px 29px 0px; 27 transform: translate(30px,-30px); 28 animation-delay: -2s; 29} 30 31.loader div:nth-child(3) { 32 background-color: rgb(95, 249, 175); 33 box-shadow: rgb(95, 249, 175) 0px 7px 29px 0px; 34 transform: translate(30px,30px); 35 animation-delay: -3s; 36} 37 38.loader div:nth-child(4) { 39 background-color: rgb(243, 171, 89); 40 box-shadow: rgb(243, 171, 89) 0px 7px 29px 0px; 41 transform: translate(-30px,30px); 42 animation-delay: -4s; 43} 44 45@keyframes move { 46 0% { 47 transform: translate(-30px, -30px); 48 } 49 50 25% { 51 transform: translate(30px, -30px); 52 } 53 54 50% { 55 transform: translate(30px, 30px); 56 } 57 58 75% { 59 transform: translate(-30px, 30px); 60 } 61 62 100% { 63 transform: translate(-30px, -30px); 64 } 65} 66
1.1K views
1.1K views
MIT License