You are currently viewing How to Make a Multi Rounded Circles with CSS and HTML Code?
multi circle animation image

How to Make a Multi Rounded Circles with CSS and HTML Code?

Multi Rounded Circles: In this lesson we will create an animation with css and html for your website. You could use this code as a loading page so it could minimize the boring amount that happen when loading is slow. Go to this post bottom for downloading button.

This tutorial Follow the following order:

  • Create HTML file and add its code.
  • Create CSS file and add its style.

Lesson 09

We Explained “Multi Rounded Circles ” at this Video:

https://youtu.be/z4Lm23Ic5M0

Create HTML file and add its 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">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Create CSS file and add its style:

body{
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(to top, #072d62, #060626);
}
.loading{
    position: relative;
    width:300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: perspective(200px);
}
.loading div{
    position: absolute;
    display: block;
    border:3px solid #fffbfb;
    box-shadow: 0 5px 0#ccc,inset 0 5px 0 #CCC;
    border-radius: 50%;
    animation: animate 3s ease-in-out infinite;
}
@keyframes animate {
    0%,100%{
        transform:translateZ(-100px);
    }
    50%{
        transform:translateZ(100px);
    }
}


.loading div:nth-child(1){
    top:0;
    left: 0;
    bottom:0;
    right: 0;
    animation-delay: 1.0s;
}

.loading div:nth-child(2){
    top:10px;
    left: 10px;
    bottom:10px;
    right: 10px;
    animation-delay: 0.9s;
}

.loading div:nth-child(3){
    top:20px;
    left: 20px;
    bottom:20px;
    right: 20px;
    animation-delay: 0.8s;
}

.loading div:nth-child(4){
    top:30px;
    left: 30px;
    bottom:30px;
    right: 30px;
    animation-delay: 0.7s;
}

.loading div:nth-child(5){
    top:40px;
    left: 40px;
    bottom:40px;
    right: 40px;
    animation-delay: 0.6s;
}

.loading div:nth-child(6){
    top:50px;
    left: 50px;
    bottom:50px;
    right: 50px;
    animation-delay: 0.5s;
}

.loading div:nth-child(7){
    top:60px;
    left: 60px;
    bottom:60px;
    right: 60px;
    animation-delay: 0.4s;
}

.loading div:nth-child(8){
    top:70px;
    left: 70px;
    bottom:70px;
    right: 70px;
    animation-delay: 0.3s;
}

.loading div:nth-child(9){
    top:80px;
    left: 80px;
    bottom:80px;
    right: 80px;
    animation-delay: 0.2s;
}

.loading div:nth-child(10){
    top:90px;
    left: 90px;
    bottom:90px;
    right: 90px;
    animation-delay: 0.1s;
}

.loading div:nth-child(11){
    top:100px;
    left: 100px;
    bottom:100px;
    right: 100px;
    animation-delay: 0s;
}

Download the 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