Skip to main content

How to Make a Page Loading Animation Using CSS || Horizontal spinner effect using CSS - Creation Code


 

Page Loader Using CSS:

In this post, we will create a spinner loading effect using CSS. A loader can create an excellent user experience in your app or website. This loader animation will be a horizontal effect and you can use it before loading your page.

Explanation:

1. First, create an HTML file and make a span section with class loader
<span class="loader"></span>

2. Now give the loader class a suitable height and width with some adjustment
.loader{
    margin: 600px;
    width: 100px;
    height: 100px;
    position: relative;
}

3. Create the before and after effect 
.loader::before,
.loader::after{
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    mix-blend-mode: multiply;
    animation: rotate 1s infinite
    cubic-bezier(0.77, 0, 0.175, 1);
}

4. Give it your favourite colour
.loader::before{
    background-color: #fc3f9e;
}

.loader::after{
    background-color: #50e8f3;
    animation-delay: .5s;
}

5. Now create the horizontal moving effect
@keyframes rotate{
    0%,100%{
        left: 95px;
    }
    25%{
        transform: scale(.3);
    }
    50%{
        left: 0;
    }
    75%{
        transform: scale(1);
    }
}

Now combine them


.loader{
    margin: 600px;
    width: 100px;
    height: 100px;
    position: relative;
}

.loader::before,
.loader::after{
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    mix-blend-mode: multiply;
    animation: rotate 1s infinite
    cubic-bezier(0.77, 0, 0.175, 1);
}

.loader::before{
    background-color: #fc3f9e;
}

.loader::after{
    background-color: #50e8f3;
    animation-delay: .5s;
}

@keyframes rotate{
    0%,100%{
        left: 95px;
    }
    25%{
        transform: scale(.3);
    }
    50%{
        left: 0;
    }
    75%{
        transform: scale(1);
    }
}

Output:



Labels:

Comments

Post a Comment

Popular posts from this blog

Draw Minecraft Charater in Python

  Minecraft  is a  sandbox video game  developed by the Swedish video game developer  Mojang Studios . The game was created by  Markus "Notch" Persson  in the  Java programming language . Following several early private testing versions, it was first made public in May 2009 before fully releasing in November 2011, with  Jens Bergensten  then taking over development.  Minecraft  has since been ported to several other platforms and is the  best-selling video game of all time , with over 238 million copies sold and nearly 140 million  monthly active users  as of 2021 . We gonna build a character of Minecraft using our creativity and coding skills so let's drive into the code: Code: import turtle as t def eye ( r , a ):     t . fillcolor ( 'brown' )     t . begin_fill ()     t . circle ( r , a )     t . end_fill () t . begin_fill () t . fillcolor (...
Post a Comment
Read more

Draw spiderman logo using python | spiderman logo with python turtle

Well like me I think you are also a fan of spiderman. We also do coding so let's create our favorite superhero in python and have some fun with it Module: We only use one simple module in this project that is Turtle Code: from turtle import * bgcolor ( 'red' ) pensize ( 10 ) fillcolor ( 'black' ) begin_fill () circle ( 20 ) end_fill () penup () right ( 90 ) forward ( 5 ) pendown () fillcolor ( 'black' ) begin_fill () right ( 60 ) for i in range ( 6 ):     forward ( 50 )     left ( 60 ) end_fill () penup () left ( 150 ) forward ( 39 ) left ( 90 ) forward ( 9 ) pendown () forward ( 25 ) right ( 60 ) forward ( 15 ) left ( 60 ) forward ( 25 ) penup () backward ( 25 ) right ( 60 ) back ( 15 ) left ( 60 ) backward ( 25 ) left ( 60 ) pendown () backward ( 35 ) left ( 120 ) forward ( 80 ) penup () left ( 40 ) forward ( 30 ) left ( 140 ) pendown () forward ( 110 ) left ( 60 ) forward ( 40 ) right ( 60 ) forward ( 7 ) right ( 60 ) forward ( 20 ) left ( 60 ) forw...
Post a Comment
Read more

Walking Cat Animation using Pure CSS and HTML

  Showing your creativity with coding is really awesome and fun. This is the post where the creativity is the CSS. So enjoy the code and try to show your creativity. HTML: <!DOCTYPE html> <html lang="en"> <head>     <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>walking Cat</title>     <link rel="stylesheet" href="style.css"> </head> <body>         <div id="marco">           <div id="cielo"></div>                 <div id="luna"></div>                 <div id="gato"></div>                 <div id="muro"></div>       ...
Post a Comment
Read more