Ad Code

Ticker

6/recent/ticker-posts

How to make a colorful preloader | Multicolor | Very easy | Abhicoder

Abhinav Mishra June 28, 2021

            Welcome coding lover friends! Today in this blog, I want to share that how to create the Color Changing Shiny Multicolor Loader using only HTML & CSS only. With just a few lines of code! 😱Some features of this are as follows:-

  • It can be Embed on your website.
  • It can be set as an animation of loading while switching one to another page.
  • This is the easiest preloader and with few codes.

Screenshot of the loader


        So here is the video for the same:-



The process of coding for Preloader

You can see the video on the top☝ or look below👇:-

   At first, I created a file name Index.html and style.css. After that, I opened my favorite Visual Studio Code. Then open the Index.html and style.css file in the code editor, I opened the Index.html and style.css file in the code editor. Then in the body section, I created a div(division) and give its class as "loader".

By this process, the HTML part is completed. Now the CSS part

   In the body section of the CSS file, the alignment is set to center, and the background to #000 means black, and the process for the code is given below. 

Here is the code of it:-

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <!--With love by Abhicoder!-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>Multicolor loding effect | Abhicoder</title>
</head>
<body>
    <div class="loader"></div>
</body>
</html> {codeBox}





CSS code
*{
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
.loader{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(47deg, transparent, transparent 40%, #e5f403);
    animation:  animate 2s linear infinite;
}
@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}
.loader:before{
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background: #000;
    border-radius: 50%;
    z-index: 1000;
}
.loader:after{
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background: linear-gradient(47deg, transparent, transparent 40%, #e5f403);
    border-radius: 50%;
    z-index: 1000;
    z-index: 1;
    filter: blur(30px);
} {codeBox}

    So that's it for today's blog. Now you can successfully create a Multicolor loader. This will give a good effect on your website and a pleasant experience for the viewers. 

     Hope you like it, coding lovers. If you like it, please leave a like and comment on this video and if you are new to my channel, then please subscribe to my channel ABHICODER.

Keep visiting!! 

                                          Goodbye coders!



Post a Comment

0 Comments

Ad Code