38 views
CSS
1.loader { 2 display: flex; 3 align-items: center; 4} 5 6.icon { 7 height: 1.5rem; 8 width: 1.5rem; 9 animation: spin 1s linear infinite; 10 stroke: rgba(107, 114, 128, 1); 11} 12 13.loading-text { 14 font-size: 0.75rem; 15 line-height: 1rem; 16 font-weight: 500; 17 color: rgba(107, 114, 128, 1); 18} 19 20@keyframes spin { 21 to { 22 transform: rotate(360deg); 23 } 24}
HTML
1<div aria-label="Loading..." role="status" class="loader"> 2 <svg class="icon" viewBox="0 0 256 256"> 3 <line x1="128" y1="32" x2="128" y2="64" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 4 <line x1="195.9" y1="60.1" x2="173.3" y2="82.7" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 5 <line x1="224" y1="128" x2="192" y2="128" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 6 <line x1="195.9" y1="195.9" x2="173.3" y2="173.3" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 7 <line x1="128" y1="224" x2="128" y2="192" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 8 <line x1="60.1" y1="195.9" x2="82.7" y2="173.3" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 9 <line x1="32" y1="128" x2="64" y2="128" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 10 <line x1="60.1" y1="60.1" x2="82.7" y2="82.7" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line> 11 </svg> 12 <span class="loading-text">Loading...</span> 13</div>