Skip to content
No results
Home
Services
About Us
Blog
Contact
All Elements
Unravelly
Home
Services
About Us
Blog
Contact
All Elements
Search
Unravelly
Search
Menu
Loader neon effect
HTML
CSS
<div class="loader-container"> <div class="loader"></div> <span>loading</span> </div>
Copy
.loader-container{ display: flex; */ min-height: 100vh; */ align-items: center; justify-content: center; } .loader{ width: 200px; height: 200px; border-radius: 50%; position: absolute; animation: loading-effect 3s linear infinite; } @keyframes loading-effect{ 0%{ transform: rotate(0deg); box-shadow: 2px 5px 3px red; } 50%{ transform: rotate(180deg); box-shadow: 2px 5px 3px blue; } 100%{ transform: rotate(360deg); box-shadow: 2px 5px 3px green; } } .loader::before{ content: ''; left: 0; right: 0; width: 100%; height: 100%; position: absolute; border-radius: 50%; box-shadow: 0 0 5px #fff; } .loader-container span{ font-size: 18px; color: whitesmoke; line-height: 200px; letter-spacing: 1px; text-transform: uppercase; }
Copy
Preview Area
Latest UI Loaders
< /> View Code
loading
< /> View Code