Loader by JEjeremyssocial
#212121
1.loader-container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 10em; 6 perspective: 800px; 7} 8 9.loader-cube { 10 position: relative; 11 width: 5em; 12 height: 5em; 13 transform-style: preserve-3d; 14 animation: rotateCube 2s infinite linear; 15} 16 17.loader-side { 18 position: absolute; 19 width: 5em; 20 height: 5em; 21 background: #333; /* Custom property for theming */ 22 border: 0.1em solid #fff; /* Relative sizing for border */ 23} 24 25.front { 26 transform: translateZ(2.5em); 27} 28.back { 29 transform: rotateY(180deg) translateZ(2.5em); 30} 31.right { 32 transform: rotateY(90deg) translateZ(2.5em); 33} 34.left { 35 transform: rotateY(-90deg) translateZ(2.5em); 36} 37.top { 38 transform: rotateX(90deg) translateZ(2.5em); 39} 40.bottom { 41 transform: rotateX(-90deg) translateZ(2.5em); 42} 43 44/* Keyframes for continuous rotation */ 45@keyframes rotateCube { 46 from { 47 transform: rotateX(0deg) rotateY(0deg); 48 } 49 to { 50 transform: rotateX(360deg) rotateY(360deg); 51 } 52} 53 54/* Interactive states using pseudo-classes */ 55.loader-side:hover { 56 background: #555; /* Darker shade on hover */ 57} 58 59.loader-side:focus { 60 border: 0.1em solid #999; /* Different border color on focus */ 61} 62 63.loader-side:active { 64 opacity: 0.8; /* Slight transparency on active */ 65} 66
1.3K views
MIT License