How to Create a Rotating Triangle Loading Page with CSS | Loading Page
Rotating loading animation Image

How to Create a Rotating Triangle Loading Page with CSS | Loading Page

Rotating Triangle Loading: In this lesson you will learn how to create a loading page with a rotating triangle. The loading page is good choice if you will need to keep the user stay in your website even if the loading is delayed. Loading page is great when the user network connection is weak or when the website loading is slow. The code is a pure CSS and HTML.

This lesson will follow the following order:

  • Creating the HTML file and code.
  • Creating the CSS file and code.

Lesson 02

This Video Explain the Same Coding of this Lesson:

https://youtu.be/lvDDgQIM6TU

Creating the HTML file and code:

First of all we will create the HTML file and lets name it “loading2.html”. Then we will add the coding of this file.

HTML file 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>

<div class="loading">
    <span>Loading...</span>
</div>
</body>
</html>

We have linked the css file with the HTML file with this line of code:

    <link href="style.css" rel="stylesheet" type="text/css">

Then we have created the triangle with creating only one div element and then control it with css code”

<div class="loading">
    <span>Loading...</span>
</div>

Creating the CSS file and code:

Here we will create a style-sheet file with the “style.css” name and then will add the following code :

body{
    margin: 0;
    padding: 0;
    background-color: #185e38;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Tahoma';
}
.loading{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-top:10px solid #00aeff ;
    position: relative;
    animation: a1 2s linear infinite ;
    border-radius: 10px;
}
.loading:before{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top:-67px;
    left:-31px;
    box-sizing: border-box;
    border-radius: 10px;
    border-bottom: 10px solid #10e600;
    transform: rotate(-60deg);
}
.loading:after{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top:-67px;
    left: 31px;
    box-sizing: border-box;
    border-radius: 10px;
    border-bottom: 10px solid #e6111c;
    transform: rotate(60deg);
    }
.loading span{
    position: absolute;
    top:-50px;
    width: 200px;
    height: 200px;
    color: white;
    text-align: center;
    line-height: 200px;
    animation: a2 2s linear infinite;
}
@keyframes a1 {
    to{
        transform: rotate(360deg);
    }
}
@keyframes a2 {
    to{
        transform: rotate(-360deg);
    }
}

First we added the body style, which will control the position of the code and the background color.

body{
    margin: 0;
    padding: 0;
    background-color: #185e38;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Tahoma';
}

Then we added the code of the loading class which will build the first triangle side. This code will control the size of this triangle side and will control the color. Also this side and the other will have the code of the animation which is animate: a1 2s linear infinite.

.loading{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-top:10px solid #00aeff ;
    position: relative;
    animation: a1 2s linear infinite ;
    border-radius: 10px;
}

The Following code will control the other triangle sides which will be the same as the .loading class except the color and the rotation.

.loading:after{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top:-67px;
    left: 31px;
    box-sizing: border-box;
    border-radius: 10px;
    border-bottom: 10px solid #e6111c;
    transform: rotate(60deg);
    }
.loading span{
    position: absolute;
    top:-50px;
    width: 200px;
    height: 200px;
    color: white;
    text-align: center;
    line-height: 200px;
    animation: a2 2s linear infinite;
}

Finally we will add the code of the animation, and actually we have tow type of animation one for the text “loading…” and the other is for the whole triangle.

@keyframes a1 {
    to{
        transform: rotate(360deg);
    }
}
@keyframes a2 {
    to{
        transform: rotate(-360deg);
    }
}

You could Download the code from the following Button:



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