Home » Preloader animation effect with HTML and CSS

Preloader animation effect with HTML and CSS

by techmidpoint
Preloader animation effect with HTML and CSS

Preloader animation effect with HTML and CSS

We can create lots of animation effects using HTML and CSS. In this tutorial, I am going to create a Preloader animation effect with HTML and CSS. It is simple and easy to create. Just I have used here::after and::before to make a preloader animation effect. Let’s see the example of preloader animation.

HTML


<!DOCTYPE html>
<html>
    <head>
        <title>loader</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
     <div class="wrap">  
<div class="loader"></div>
</div>
    </body>
</html>

CSS

body{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background:#333;
}
.wrap{
    width: 80px;
    height: 80px;
    padding: 10px;
    background: #f2f2f2;
    border-radius: 50%;
   
}
.loader{
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    animation: spin 4s linear infinite;  
   
}
.loader:before,
.loader:after{
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 14px;
    box-shadow: 18px 18px #0DB14C, -18px -18px #0189D2;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    animation: load 1.2s linear infinite;
}
.loader:after{
    box-shadow: 18px 18px #6461AB, -18px -18px #CD014F;
    transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes load{
    50%{ height: 42px; }
}
@keyframes spin{
    100%{ transform: rotate(360deg); }
}

For More Tutorials Please Click Here

You may also like

Leave a Comment