Skip to content

No results

Home
About Us
Blog
Contact
All Elements

Unravelly

Home
About Us
Blog
Contact
All Elements

Unravelly

Loader neon effect

HTML CSS

.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;
        }

Preview Area

Latest UI Loaders

< /> View Code

loading

< /> View Code

Socials

Home
About Us
Contact

Terms & Conditions | Privacy Policy

Copyright © 2024 Unravelly All rights reserved