WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ícone de carregamento CSS Spinner
308
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
21 October 2024
Alternância de gravação
19 May 2025
Smartwatches de luxo que redefinem elegância e tecnologia
3 March 2025
Interruptor de energia
HTML
Copy
<div class="loading-icon-1"></div>
CSS
Copy
* { margin: 0; padding: 0; } body{ background: rgb(0, 0, 0); width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: monospace; } /* argola no centro */ .loading-icon-1{ width: 50px; height: 50px; background: transparent; border-radius: 100%; border:solid 2px white; display: flex; align-items: center; justify-content: end; } /* after com o elemento dentro e uma animação simples de rotação 360deg com origem -50% pois o justify-content está no end */ .loading-icon-1::after{ content: '⚪'; animation:1.5s loader linear infinite; transform-origin: -50%; } /*animação simples */ @keyframes loader{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
