Spinning Circles

Developer
Adam Grayson
Size
3,581 Kb
Views
18,216
  1. Spinning Circles Previews
  2. Spinning Circles HTML Codes
  3. Spinning Circles CSS Codes
  4. Spinning Circles JS Codes

How do I make an spinning circles?

Could be a css loader, might not be, probably shouldn't be.. What is a spinning circles? How do you make a spinning circles? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Spinning Circles Previews
IQ Test

Spinning Circles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinning Circles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
<div class="circle8"></div>
<div class="circle9"></div>
<div class="animationBtn">Stop</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spinning Circles - Script Codes CSS Codes

html, body { background: #3B3B3B; box-sizing: border-box;
}
.circle1 { width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -115px 0 0 -115px; border-top: 5px solid #2682D5; border-bottom: 5px solid #2682D5; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.8s linear infinite; animation: rotate360 1.8s linear infinite;
}
.circle2 { width: 220px; height: 220px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -110px 0 0 -110px; border-top: 5px solid #33CBE0; border-bottom: 5px solid #33CBE0; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.7s linear infinite; animation: rotate360 1.7s linear infinite;
}
.circle3 { width: 210px; height: 210px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -105px 0 0 -105px; border-top: 5px solid #DC3964; border-bottom: 5px solid #DC3964; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.6s linear infinite; animation: rotate360 1.6s linear infinite;
}
.circle4 { width: 200px; height: 200px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; border-top: 5px solid #EC7547; border-bottom: 5px solid #EC7547; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.5s linear infinite; animation: rotate360 1.5s linear infinite;
}
.circle5 { width: 190px; height: 190px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -95px; border-top: 5px solid #FFD728; border-bottom: 5px solid #FFD728; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.4s linear infinite; animation: rotate360 1.4s linear infinite;
}
.circle6 { width: 180px; height: 180px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -90px 0 0 -90px; border-top: 5px solid #EE77DE; border-bottom: 5px solid #EE77DE; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.3s linear infinite; animation: rotate360 1.3s linear infinite;
}
.circle7 { width: 170px; height: 170px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -85px 0 0 -85px; border-top: 5px solid #21BD63; border-bottom: 5px solid #21BD63; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.2s linear infinite; animation: rotate360 1.2s linear infinite;
}
.circle8 { width: 160px; height: 160px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -80px 0 0 -80px; border-top: 5px solid #72DC74; border-bottom: 5px solid #72DC74; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1.1s linear infinite; animation: rotate360 1.1s linear infinite;
}
.circle9 { width: 150px; height: 150px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -75px 0 0 -75px; border-top: 5px solid #6F69ED; border-bottom: 5px solid #6F69ED; border-left: 5px solid #3B3B3B; border-right: 5px solid #3B3B3B; -webkit-animation: rotate360 1s linear infinite; animation: rotate360 1s linear infinite;
}
@-webkit-keyframes rotate360 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate360 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.animationBtn { position: fixed; width: 150px; height: 40px; background: #303030; color: #FFFFFF; border-radius: 4px; cursor: pointer; font-family: "TrebuchetMS", trebuchet, sans-serif; text-align: center; line-height: 40px; left: 0; right: 0; margin: auto; bottom: 40px; -webkit-transition: 0.2s background; transition: 0.2s background;
}
.animationBtn:hover { background: #5DADE2;
}

Spinning Circles - Script Codes JS Codes

(function() { $(document).ready(function() { $('.animationBtn').click(function() { $('.circle1').css('animation', 'none'); $('.circle2').css('animation', 'none'); $('.circle3').css('animation', 'none'); $('.circle4').css('animation', 'none'); $('.circle5').css('animation', 'none'); $('.circle6').css('animation', 'none'); $('.circle7').css('animation', 'none'); $('.circle8').css('animation', 'none'); $('.circle9').css('animation', 'none'); }); });
}).call(this);
Spinning Circles - Script Codes
Spinning Circles - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 3
Size 3,581 Kb
Views 18,216
Do you need developer help for Spinning Circles?

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!

Adam Grayson (agrayson) Script Codes
Name
SVG Animation - Circle Fill
Simple Accordion
CCS3 Navigation Hover Effect
Form Progress Bar
HTML5 GeoLocation Example
Playing Animations on Scroll
Random Weapon Generator
RPG Cooldown
Drag and Drop File Preview
Dungeon Crawler
Create amazing SEO content 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!