You are currently viewing How to Create an Animated Squire Shapes as Loading Page with CSS Code?
squire loading page image

How to Create an Animated Squire Shapes as Loading Page with CSS Code?

Animated Squire Shapes: In this lesson we will create an animated loading page. The code will be in pure css and HTML. You could download the code from the button at this post bottom. This lesson is one of the loading course lessons.

This post follow the following order:

  • Create HTML CODE.
  • Create CSS Code.

Lesson 12

In this Video we Explained “Animated Squire Shapes” Lesson:

https://youtu.be/3kX7Lmq-K78

Create HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<ul class="center">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

Create CSS Code:

body{
    margin: 0;
    padding: 0;
    background-color: #0b3054;
}
.center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
}
ul li{
    list-style: none;
    width: 40px;
    height: 40px;
    background-color: #ff00c1;
    margin: 0 5px;
    animation: animate 1.2s linear infinite;
}
@keyframes animate {
    0%{
        transform: translateY(0);
        height: 40px;

    }25%{
        transform: translateY(0);
        height: 40px;

    }50%{
        transform: translateY(-40px);
        height: 60px;

    }75%{
        transform: translateY(0);
        height: 40px;

    }100%{
        transform: translateY(0);
        height: 40px;

    }
}
ul li:nth-child(1){
    animation-delay: 0s;
}
ul li:nth-child(2){
    animation-delay: 0.20s;
}
ul li:nth-child(3){
    animation-delay: 0.40s;
}
ul li:nth-child(4){
    animation-delay: 0.60s;
}
ul li:nth-child(5){
    animation-delay: 0.80s;
}

Download Code from here:



Consequently You could follow us at :

Website URL: https://www.safhatech.com/

YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instagram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone: 967778283416

Leave a Reply