Glitch Square Loader

HTML_STRUCTURE

<div class='bh-load-v1-sq'></div>

CSS_STYLING

.bh-load-v1-sq { width: 40px; height: 40px; border: 4px solid #fff; position: relative; animation: bh-v1-sq-rot 2s infinite ease-in-out; } @keyframes bh-v1-sq-rot { 0% { transform: rotate(0deg); border-color: #fff; } 25% { border-color: #ff0055; transform: rotate(90deg) skew(10deg); } 50% { transform: rotate(180deg); border-color: #fff; } 75% { border-color: #00ff88; transform: rotate(270deg) skew(-10deg); } 100% { transform: rotate(360deg); } }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.