Circle loader

Developer
Zoite
Size
2,788 Kb
Views
10,120
  1. Circle loader Previews
  2. Circle loader HTML Codes
  3. Circle loader CSS Codes

How do I make an circle loader?

What is a circle loader? How do you make a circle loader? This script and codes were developed by Zoite on 29 November 2022, Tuesday.

Circle loader Previews
IQ Test

Circle loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>circle loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="circle-0"> <div class="inner-0"></div> </div> <div class="circle-1"> <div class="inner-1"></div> </div> <div class="circle-2"> <div class="inner-2"></div> </div> <div class="circle-3"> <div class="inner-3"></div> </div> <div class="circle-4"> <div class="inner-4"></div> </div> <div class="circle-5"> <div class="inner-5"></div> </div> <div class="circle-6"> <div class="inner-6"></div> </div> <div class="circle-7"> <div class="inner-7"></div> </div> <div class="circle-8"> <div class="inner-8"></div> </div>
</div>
</body>
</html>

Circle loader - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0; background-color: #828282;
}
.container { width: 400px; height: 400px; position: relative;
}
div[class^='circle-'] { border-radius: 50%; box-sizing: border-box; background-color: #828282; position: relative; padding: 5px; position: absolute;
}
.inner-1 { border: 5px solid transparent; border-top-color: #454346; border-bottom-color: #c2c1c2; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-1 { position: relative; border: 10px solid transparent; border-top-color: black; border-bottom-color: white; animation: rotate 2.77778s linear infinite; top: 0px; left: 0px; right: 0px; bottom: 0px; transform-origin: 50%;
}
.inner-2 { border: 5px solid transparent; border-top-color: #c2c1c2; border-bottom-color: #454346; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-2 { position: relative; border: 10px solid transparent; border-top-color: white; border-bottom-color: black; animation: rotate 3.125s linear infinite; top: 20px; left: 20px; right: 20px; bottom: 20px; transform-origin: 50%;
}
.inner-3 { border: 5px solid transparent; border-top-color: #454346; border-bottom-color: #c2c1c2; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-3 { position: relative; border: 10px solid transparent; border-top-color: black; border-bottom-color: white; animation: rotate 3.57143s linear infinite; top: 40px; left: 40px; right: 40px; bottom: 40px; transform-origin: 50%;
}
.inner-4 { border: 5px solid transparent; border-top-color: #c2c1c2; border-bottom-color: #454346; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-4 { position: relative; border: 10px solid transparent; border-top-color: white; border-bottom-color: black; animation: rotate 4.16667s linear infinite; top: 60px; left: 60px; right: 60px; bottom: 60px; transform-origin: 50%;
}
.inner-5 { border: 5px solid transparent; border-top-color: #454346; border-bottom-color: #c2c1c2; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-5 { position: relative; border: 10px solid transparent; border-top-color: black; border-bottom-color: white; animation: rotate 5s linear infinite; top: 80px; left: 80px; right: 80px; bottom: 80px; transform-origin: 50%;
}
.inner-6 { border: 5px solid transparent; border-top-color: #c2c1c2; border-bottom-color: #454346; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-6 { position: relative; border: 10px solid transparent; border-top-color: white; border-bottom-color: black; animation: rotate 6.25s linear infinite; top: 100px; left: 100px; right: 100px; bottom: 100px; transform-origin: 50%;
}
.inner-7 { border: 5px solid transparent; border-top-color: #454346; border-bottom-color: #c2c1c2; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-7 { position: relative; border: 10px solid transparent; border-top-color: black; border-bottom-color: white; animation: rotate 8.33333s linear infinite; top: 120px; left: 120px; right: 120px; bottom: 120px; transform-origin: 50%;
}
.inner-8 { border: 5px solid transparent; border-top-color: #c2c1c2; border-bottom-color: #454346; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-8 { position: relative; border: 10px solid transparent; border-top-color: white; border-bottom-color: black; animation: rotate 12.5s linear infinite; top: 140px; left: 140px; right: 140px; bottom: 140px; transform-origin: 50%;
}
.inner-9 { border: 5px solid transparent; border-top-color: #454346; border-bottom-color: #c2c1c2; border-radius: 50%; box-sizing: border-radius; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle-9 { position: relative; border: 10px solid transparent; border-top-color: black; border-bottom-color: white; animation: rotate 25s linear infinite; top: 160px; left: 160px; right: 160px; bottom: 160px; transform-origin: 50%;
}
@keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
Circle loader - Script Codes
Circle loader - Script Codes
Home Page Home
Developer Zoite
Username zoite
Uploaded November 29, 2022
Rating 3
Size 2,788 Kb
Views 10,120
Do you need developer help for Circle loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zoite (zoite) Script Codes
Name
Glitch Text
Login Form
A Pen by zoite
Twitter Card
Login Form
Rainbow Bordered Button
Step Bar
Weather App
Tic-Tac-Toe
Leaderboard
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!