Snippio

Dynamic Changing Loading Animation

<i class="loading"></i> <style> .loading { animation: rotation 1s infinite linear; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; border-top-color: rgba(255, 255, 255, 0.9); height: 3em; width: 3em; } @keyframes rotation { to { transform: rotate(360deg); } } /* Extra junk */ html, body { height: 100%; } body { animation: bgTransition 20s infinite linear; display: flex; margin: 0; overflow: hidden; } .loading { margin: auto; } @keyframes bgTransition { 0% { background-color: #08a; } 33% { background-color: #80a; } 66% { background-color: #0a8; } 100% { background-color: #08a; } } </style>

Preview