Multi Dimension Animated Circles image | safhatech design

Making a Multi Dimension Animated Circles in CSS code

Post author:Mofreh
Post published:November 7, 2019
Post category:Loading Animation / Web Design
Post comments:0 Comments

Multi Dimension Animated Circles: In this lesson will create another loading page. You could get the code from a link at this post bottom. The code is created with pure CSS and HTML.

This lesson is a part of an animated loading page course. These lessons is supported with: SAFHATECH.COM.

You could see the other videos and lessons by going to safhatech.com and going to categories. From the navigation bar and then loading at design.

The order of this lesson is like this:

Creating empty HTML file then add HTML code.
Creating empty style-sheet file and then adding CSS style.

Lesson 19

This Video explain the same topic:

https://youtu.be/8tg1EcOKYCc

Creating empty HTML file then add HTML code:

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

Creating empty style-sheet file and then adding CSS style:

body{
    padding: 0;
    margin: 0;
    background-color:#0a4544 ;
}
.center{
    display: flex;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.loading{
    width: 200px;
    height: 200px;
    border-left: 5px solid #e49823;
    border-top: 5px solid #e49823;
    border-right: 5px solid #4659e4;
    border-bottom: 5px solid #4659e4;
    border-radius: 50%;
    animation: anim1 2s linear infinite;
}

.loading:before{
    content: '';
   position: absolute;
    top:10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
    border-left: 5px solid #34e481;
    border-top: 5px solid #34e481;
    border-right: 5px solid #e400d5;
    border-bottom: 5px solid #e400d5;
    border-radius: 50%;
    animation: anim2 2s linear infinite;
}
.loading:after{
    content: '';
   position: absolute;
    top:20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
    border-left: 5px solid #e4bc10;
    border-top: 5px solid #e4bc10;
    border-right: 5px solid #11d9e4;
    border-bottom: 5px solid #11d9e4;
    border-radius: 50%;
    animation: anim3 2s linear infinite;
}
@keyframes anim1 {
    0%{
        transform: rotate(0deg);
    } 100%{
        transform: rotate(360deg);
    }
}
@keyframes anim2 {
    0%{
        transform: rotateX(0deg);
    } 100%{
        transform: rotateX(360deg);
    }
}

@keyframes anim3 {
    0%{
        transform: rotateY(0deg);
    } 100%{
        transform: rotateY(360deg);
    }
}

Finally: You could Download the code from here:Download Code

Download Code

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