Loader by codebykay101
#212121
1.container { 2 position: relative; 3 width: 100%; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7} 8 9.container .square { 10 position: absolute; 11 width: 200px; 12 height: 200px; 13} 14 15.container .square:nth-child(2) { 16 transform: translate(-25%, -25%) rotateX(180deg); 17 filter: hue-rotate(60deg); 18} 19 20.container .square:nth-child(3) { 21 transform: translate(25%, 25%) rotate(180deg); 22 filter: hue-rotate(180deg); 23} 24 25.container .square::before { 26 content: ''; 27 position: absolute; 28 width: 20px; 29 height: 20px; 30 background: #0f0; 31 box-shadow: 0 0 0 8px #0f03, 0 0 0 15px #0f01; 32 animation: animateSquare 4s linear infinite; 33} 34 35@keyframes animateSquare { 36 0% { 37 transform: translate(2px,2px); 38 } 39 40 25% { 41 transform: translate(178px,2px); 42 } 43 44 50% { 45 transform: translate(178px,178px); 46 } 47 48 75% { 49 transform: translate(2px,178px); 50 } 51 52 100% { 53 transform: translate(2px,2px); 54 } 55} 56 57.container .square span { 58 position: absolute; 59 inset: 10px; 60 overflow: hidden; 61 transform: rotate(calc(90deg * var(--i))); 62} 63 64.container .square span::before { 65 content: ''; 66 position: absolute; 67 width: 100%; 68 height: 4px; 69 background: #0f0; 70 transform: translateX(-100%); 71 animation: animate 4s linear infinite; 72 animation-delay: calc(1s * var(--i)); 73} 74 75@keyframes animate { 76 0% { 77 transform: translateX(-100%); 78 } 79 80 50%,100% { 81 transform: translateX(100%); 82 } 83}
1.3K views
1.3K views
MIT License