Loader - CSS Spinner

Spinner são pequenas animações usadas para indicar que algo está carregando e que o usuário precisa esperar um pouco.



HTML:


<div class="spinner"></div>

CSS:


.spinner {
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-left-color: #22a6b3;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}


Veja mais exemplos em:

https://projects.lukehaas.me/css-loaders/

https://www.turbosite.com.br/blog/faca-um-loading-apenas-com-css