DEV Community

Cover image for Animated Gradient Loader Using Pure HTML & CSS.|
Technical Vandar
Technical Vandar

Posted on

26 3

Animated Gradient Loader Using Pure HTML & CSS.|

Hi Guys This is Awesome animated Gradient Loader Here you can get source code.

Source Code:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Gradient Loader HTML and CSS</title>
</head>
<body>
    <div class="loader">
        <span></span>
    </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #010113;
}
.loader{
    position: relative;
    overflow: hidden;
    box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),
                10px 10px 10px rgba(0, 0, 0, 0.4),
                inset -5px -5px -5px rgba(255, 255, 255, 0.2),
                inset 10px 10px 10px rgba(0, 0, 0, 0.4);
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.loader:before{
    position: absolute;
    content: '';
    z-index: 10;
    opacity: 10;
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    background-color: #010113;
    border-radius: 50%;
    box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),
    10px 10px 10px rgba(0, 0, 0, 0.4),
    inset -5px -5px -5px rgba(255, 255, 255, 0.2),
    inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
.loader span{
    position: absolute;
    height: 100%;
    width: 100%;
    filter: blur(20px);
    border-radius: 50%;
    background: linear-gradient(#0e11d4, #0b8f84, #d81587);
    animation: loader 0.6s linear infinite;
}
@keyframes loader {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

Youtube Tutorial

Watch Here




Find Me On:

Facebook
Youtube
Github

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (4)

Collapse
 
lil5 profile image
Lucian I. Last
Collapse
 
joseph_ogunsuyi profile image
OGUNSUYI JOSEPH OLUWASEUN

Amazing, it's making sense

Collapse
 
juanfabiorey profile image
juanfabiorey

Thaks!

Collapse
 
technicalvandar885 profile image
Technical Vandar

Get this on youtube also get awesome web dev projects:
youtube.com/technicalvandar

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more