Infiniti circlez

Developer

Size

3,812 Kb

Views

6,072

Infiniti circlez Previews
Infiniti circlez HTML Codes
Infiniti circlez CSS Codes

How do I make an infiniti circlez?

Reusable circlez mixin :)Thx to Dominic Magnifico for the original ideea and sharing!. What is a infiniti circlez? How do you make a infiniti circlez? This script and codes were developed by Sabin Tudor on 03 January 2023, Tuesday.

Infiniti circlez Previews

Infiniti circlez - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Infiniti circlez</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circlez"> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--solid circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--solid circle--counter"></div>
</div>
<div class="circlez circlez--energy"> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--solid circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--solid circle--counter"></div>
</div>
<div class="circlez circlez--power"> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--solid circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--clock"></div> <div class="circle circle--counter"></div> <div class="circle circle--solid circle--clock"></div> <div class="circle circle--solid circle--counter"></div>
</div>
</body>
</html>

Infiniti circlez - Script Codes CSS Codes

body,
html { height: 100%; min-height: 100%;
}
body { background: -webkit-linear-gradient(top right, #2B1A1F, #1a1a1a); background: linear-gradient(top right, #2B1A1F, #1a1a1a); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.circlez { position: relative; width: 100%; height: 100%; overflow: hidden;
}
.circlez--energy .circle { border-color: rgba(102, 230, 255, 0.1);
}
.circlez--energy .circle:nth-of-type(1) { -webkit-animation-duration: calc(30s * 1); animation-duration: calc(30s * 1); box-shadow: 0 0 22px rgba(102, 230, 255, 0.02) inset; border-color: rgba(102, 230, 255, 0.1); border-width: 0.3px; width: calc(50px * 1); height: calc(50px * 1); top: calc(50% - (50px * 1) / 2); left: calc(50% - (50px * 1) / 2);
}
.circlez--energy .circle:nth-of-type(2) { -webkit-animation-duration: calc(30s * 2); animation-duration: calc(30s * 2); box-shadow: 0 0 44px rgba(102, 230, 255, 0.04) inset; border-color: rgba(102, 230, 255, 0.2); border-width: 0.6px; width: calc(50px * 2); height: calc(50px * 2); top: calc(50% - (50px * 2) / 2); left: calc(50% - (50px * 2) / 2);
}
.circlez--energy .circle:nth-of-type(3) { -webkit-animation-duration: calc(30s * 3); animation-duration: calc(30s * 3); box-shadow: 0 0 66px rgba(102, 230, 255, 0.06) inset; border-color: rgba(102, 230, 255, 0.3); border-width: 0.9px; width: calc(50px * 3); height: calc(50px * 3); top: calc(50% - (50px * 3) / 2); left: calc(50% - (50px * 3) / 2);
}
.circlez--energy .circle:nth-of-type(4) { -webkit-animation-duration: calc(30s * 4); animation-duration: calc(30s * 4); box-shadow: 0 0 88px rgba(102, 230, 255, 0.08) inset; border-color: rgba(102, 230, 255, 0.4); border-width: 1.2px; width: calc(50px * 4); height: calc(50px * 4); top: calc(50% - (50px * 4) / 2); left: calc(50% - (50px * 4) / 2);
}
.circlez--energy .circle:nth-of-type(5) { -webkit-animation-duration: calc(30s * 5); animation-duration: calc(30s * 5); box-shadow: 0 0 110px rgba(102, 230, 255, 0.1) inset; border-color: rgba(102, 230, 255, 0.5); border-width: 1.5px; width: calc(50px * 5); height: calc(50px * 5); top: calc(50% - (50px * 5) / 2); left: calc(50% - (50px * 5) / 2);
}
.circlez--energy .circle:nth-of-type(6) { -webkit-animation-duration: calc(30s * 6); animation-duration: calc(30s * 6); box-shadow: 0 0 132px rgba(102, 230, 255, 0.12) inset; border-color: rgba(102, 230, 255, 0.6); border-width: 1.8px; width: calc(50px * 6); height: calc(50px * 6); top: calc(50% - (50px * 6) / 2); left: calc(50% - (50px * 6) / 2);
}
.circlez--energy .circle:nth-of-type(7) { -webkit-animation-duration: calc(30s * 7); animation-duration: calc(30s * 7); box-shadow: 0 0 154px rgba(102, 230, 255, 0.14) inset; border-color: rgba(102, 230, 255, 0.7); border-width: 2.1px; width: calc(50px * 7); height: calc(50px * 7); top: calc(50% - (50px * 7) / 2); left: calc(50% - (50px * 7) / 2);
}
.circlez--energy .circle:nth-of-type(8) { -webkit-animation-duration: calc(30s * 8); animation-duration: calc(30s * 8); box-shadow: 0 0 176px rgba(102, 230, 255, 0.16) inset; border-color: rgba(102, 230, 255, 0.8); border-width: 2.4px; width: calc(50px * 8); height: calc(50px * 8); top: calc(50% - (50px * 8) / 2); left: calc(50% - (50px * 8) / 2);
}
.circlez--energy .circle:nth-of-type(9) { -webkit-animation-duration: calc(30s * 9); animation-duration: calc(30s * 9); box-shadow: 0 0 198px rgba(102, 230, 255, 0.18) inset; border-color: rgba(102, 230, 255, 0.9); border-width: 2.7px; width: calc(50px * 9); height: calc(50px * 9); top: calc(50% - (50px * 9) / 2); left: calc(50% - (50px * 9) / 2);
}
.circlez--energy .circle:nth-of-type(10) { -webkit-animation-duration: calc(30s * 10); animation-duration: calc(30s * 10); box-shadow: 0 0 220px rgba(102, 230, 255, 0.2) inset; border-color: #66e6ff; border-width: 3px; width: calc(50px * 10); height: calc(50px * 10); top: calc(50% - (50px * 10) / 2); left: calc(50% - (50px * 10) / 2);
}
.circlez--energy .circle:nth-of-type(11) { -webkit-animation-duration: calc(30s * 11); animation-duration: calc(30s * 11); box-shadow: 0 0 242px rgba(102, 230, 255, 0.22) inset; border-color: #66e6ff; border-width: 3.3px; width: calc(50px * 11); height: calc(50px * 11); top: calc(50% - (50px * 11) / 2); left: calc(50% - (50px * 11) / 2);
}
.circlez--power .circle { border-color: rgba(255, 183, 0, 0.1);
}
.circlez--power .circle:nth-of-type(1) { -webkit-animation-duration: calc(30s * 1); animation-duration: calc(30s * 1); box-shadow: 0 0 22px rgba(255, 183, 0, 0.02) inset; border-color: rgba(255, 183, 0, 0.1); border-width: 0.3px; width: calc(50px * 1); height: calc(50px * 1); top: calc(50% - (50px * 1) / 2); left: calc(50% - (50px * 1) / 2);
}
.circlez--power .circle:nth-of-type(2) { -webkit-animation-duration: calc(30s * 2); animation-duration: calc(30s * 2); box-shadow: 0 0 44px rgba(255, 183, 0, 0.04) inset; border-color: rgba(255, 183, 0, 0.2); border-width: 0.6px; width: calc(50px * 2); height: calc(50px * 2); top: calc(50% - (50px * 2) / 2); left: calc(50% - (50px * 2) / 2);
}
.circlez--power .circle:nth-of-type(3) { -webkit-animation-duration: calc(30s * 3); animation-duration: calc(30s * 3); box-shadow: 0 0 66px rgba(255, 183, 0, 0.06) inset; border-color: rgba(255, 183, 0, 0.3); border-width: 0.9px; width: calc(50px * 3); height: calc(50px * 3); top: calc(50% - (50px * 3) / 2); left: calc(50% - (50px * 3) / 2);
}
.circlez--power .circle:nth-of-type(4) { -webkit-animation-duration: calc(30s * 4); animation-duration: calc(30s * 4); box-shadow: 0 0 88px rgba(255, 183, 0, 0.08) inset; border-color: rgba(255, 183, 0, 0.4); border-width: 1.2px; width: calc(50px * 4); height: calc(50px * 4); top: calc(50% - (50px * 4) / 2); left: calc(50% - (50px * 4) / 2);
}
.circlez--power .circle:nth-of-type(5) { -webkit-animation-duration: calc(30s * 5); animation-duration: calc(30s * 5); box-shadow: 0 0 110px rgba(255, 183, 0, 0.1) inset; border-color: rgba(255, 183, 0, 0.5); border-width: 1.5px; width: calc(50px * 5); height: calc(50px * 5); top: calc(50% - (50px * 5) / 2); left: calc(50% - (50px * 5) / 2);
}
.circlez--power .circle:nth-of-type(6) { -webkit-animation-duration: calc(30s * 6); animation-duration: calc(30s * 6); box-shadow: 0 0 132px rgba(255, 183, 0, 0.12) inset; border-color: rgba(255, 183, 0, 0.6); border-width: 1.8px; width: calc(50px * 6); height: calc(50px * 6); top: calc(50% - (50px * 6) / 2); left: calc(50% - (50px * 6) / 2);
}
.circlez--power .circle:nth-of-type(7) { -webkit-animation-duration: calc(30s * 7); animation-duration: calc(30s * 7); box-shadow: 0 0 154px rgba(255, 183, 0, 0.14) inset; border-color: rgba(255, 183, 0, 0.7); border-width: 2.1px; width: calc(50px * 7); height: calc(50px * 7); top: calc(50% - (50px * 7) / 2); left: calc(50% - (50px * 7) / 2);
}
.circlez--power .circle:nth-of-type(8) { -webkit-animation-duration: calc(30s * 8); animation-duration: calc(30s * 8); box-shadow: 0 0 176px rgba(255, 183, 0, 0.16) inset; border-color: rgba(255, 183, 0, 0.8); border-width: 2.4px; width: calc(50px * 8); height: calc(50px * 8); top: calc(50% - (50px * 8) / 2); left: calc(50% - (50px * 8) / 2);
}
.circlez--power .circle:nth-of-type(9) { -webkit-animation-duration: calc(30s * 9); animation-duration: calc(30s * 9); box-shadow: 0 0 198px rgba(255, 183, 0, 0.18) inset; border-color: rgba(255, 183, 0, 0.9); border-width: 2.7px; width: calc(50px * 9); height: calc(50px * 9); top: calc(50% - (50px * 9) / 2); left: calc(50% - (50px * 9) / 2);
}
.circlez--power .circle:nth-of-type(10) { -webkit-animation-duration: calc(30s * 10); animation-duration: calc(30s * 10); box-shadow: 0 0 220px rgba(255, 183, 0, 0.2) inset; border-color: #ffb700; border-width: 3px; width: calc(50px * 10); height: calc(50px * 10); top: calc(50% - (50px * 10) / 2); left: calc(50% - (50px * 10) / 2);
}
.circlez--power .circle:nth-of-type(11) { -webkit-animation-duration: calc(30s * 11); animation-duration: calc(30s * 11); box-shadow: 0 0 242px rgba(255, 183, 0, 0.22) inset; border-color: #ffb700; border-width: 3.3px; width: calc(50px * 11); height: calc(50px * 11); top: calc(50% - (50px * 11) / 2); left: calc(50% - (50px * 11) / 2);
}
.circle { width: 0; height: 0; position: absolute; top: 50%; left: 50%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-animation-name: rotate; animation-name: rotate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; border-radius: 50%; border-style: dashed; border-width: 0.3px; border-color: rgba(237, 28, 91, 0.1);
}
.circle--solid { border-style: solid;
}
.circle--counter { -webkit-animation-direction: reverse; animation-direction: reverse;
}
.circle:nth-of-type(1) { -webkit-animation-duration: calc(30s * 1); animation-duration: calc(30s * 1); box-shadow: 0 0 22px rgba(237, 28, 91, 0.02) inset; border-color: rgba(237, 28, 91, 0.1); border-width: 0.3px; width: calc(50px * 1); height: calc(50px * 1); top: calc(50% - (50px * 1) / 2); left: calc(50% - (50px * 1) / 2);
}
.circle:nth-of-type(2) { -webkit-animation-duration: calc(30s * 2); animation-duration: calc(30s * 2); box-shadow: 0 0 44px rgba(237, 28, 91, 0.04) inset; border-color: rgba(237, 28, 91, 0.2); border-width: 0.6px; width: calc(50px * 2); height: calc(50px * 2); top: calc(50% - (50px * 2) / 2); left: calc(50% - (50px * 2) / 2);
}
.circle:nth-of-type(3) { -webkit-animation-duration: calc(30s * 3); animation-duration: calc(30s * 3); box-shadow: 0 0 66px rgba(237, 28, 91, 0.06) inset; border-color: rgba(237, 28, 91, 0.3); border-width: 0.9px; width: calc(50px * 3); height: calc(50px * 3); top: calc(50% - (50px * 3) / 2); left: calc(50% - (50px * 3) / 2);
}
.circle:nth-of-type(4) { -webkit-animation-duration: calc(30s * 4); animation-duration: calc(30s * 4); box-shadow: 0 0 88px rgba(237, 28, 91, 0.08) inset; border-color: rgba(237, 28, 91, 0.4); border-width: 1.2px; width: calc(50px * 4); height: calc(50px * 4); top: calc(50% - (50px * 4) / 2); left: calc(50% - (50px * 4) / 2);
}
.circle:nth-of-type(5) { -webkit-animation-duration: calc(30s * 5); animation-duration: calc(30s * 5); box-shadow: 0 0 110px rgba(237, 28, 91, 0.1) inset; border-color: rgba(237, 28, 91, 0.5); border-width: 1.5px; width: calc(50px * 5); height: calc(50px * 5); top: calc(50% - (50px * 5) / 2); left: calc(50% - (50px * 5) / 2);
}
.circle:nth-of-type(6) { -webkit-animation-duration: calc(30s * 6); animation-duration: calc(30s * 6); box-shadow: 0 0 132px rgba(237, 28, 91, 0.12) inset; border-color: rgba(237, 28, 91, 0.6); border-width: 1.8px; width: calc(50px * 6); height: calc(50px * 6); top: calc(50% - (50px * 6) / 2); left: calc(50% - (50px * 6) / 2);
}
.circle:nth-of-type(7) { -webkit-animation-duration: calc(30s * 7); animation-duration: calc(30s * 7); box-shadow: 0 0 154px rgba(237, 28, 91, 0.14) inset; border-color: rgba(237, 28, 91, 0.7); border-width: 2.1px; width: calc(50px * 7); height: calc(50px * 7); top: calc(50% - (50px * 7) / 2); left: calc(50% - (50px * 7) / 2);
}
.circle:nth-of-type(8) { -webkit-animation-duration: calc(30s * 8); animation-duration: calc(30s * 8); box-shadow: 0 0 176px rgba(237, 28, 91, 0.16) inset; border-color: rgba(237, 28, 91, 0.8); border-width: 2.4px; width: calc(50px * 8); height: calc(50px * 8); top: calc(50% - (50px * 8) / 2); left: calc(50% - (50px * 8) / 2);
}
.circle:nth-of-type(9) { -webkit-animation-duration: calc(30s * 9); animation-duration: calc(30s * 9); box-shadow: 0 0 198px rgba(237, 28, 91, 0.18) inset; border-color: rgba(237, 28, 91, 0.9); border-width: 2.7px; width: calc(50px * 9); height: calc(50px * 9); top: calc(50% - (50px * 9) / 2); left: calc(50% - (50px * 9) / 2);
}
.circle:nth-of-type(10) { -webkit-animation-duration: calc(30s * 10); animation-duration: calc(30s * 10); box-shadow: 0 0 220px rgba(237, 28, 91, 0.2) inset; border-color: #ed1c5b; border-width: 3px; width: calc(50px * 10); height: calc(50px * 10); top: calc(50% - (50px * 10) / 2); left: calc(50% - (50px * 10) / 2);
}
.circle:nth-of-type(11) { -webkit-animation-duration: calc(30s * 11); animation-duration: calc(30s * 11); box-shadow: 0 0 242px rgba(237, 28, 91, 0.22) inset; border-color: #ed1c5b; border-width: 3.3px; width: calc(50px * 11); height: calc(50px * 11); top: calc(50% - (50px * 11) / 2); left: calc(50% - (50px * 11) / 2);
}
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes rotate3d { from { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } to { -webkit-transform: rotate3d(0, 0, 1, 359deg); transform: rotate3d(0, 0, 1, 359deg); }
}
@keyframes rotate3d { from { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } to { -webkit-transform: rotate3d(0, 0, 1, 359deg); transform: rotate3d(0, 0, 1, 359deg); }
}

Home Page	Home
Developer	Sabin Tudor
Username	NyX
Uploaded	January 03, 2023
Rating	3
Size	3,812 Kb
Views	6,072

Do you need developer help for Infiniti circlez?

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!

Sabin Tudor (NyX) Script Codes

Name	Size
Infinity Wall	3,275 Kb
Toggle switch with both states visible	2,690 Kb
Animated skewed panes	4,462 Kb
Infinity glowline CSS circles	6,650 Kb
Canvas Image Glitch Effect - Vaderman	4,740 Kb
A Pen by Sabin Tudor	5,198 Kb
SVG low-poly background anim	15,267 Kb
Bits particle	3,570 Kb
Strings	3,345 Kb
Hypnoring thing 2.5D	5,907 Kb

Create amazing Facebook ads 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!

Similar Scripts & Codes

Name	Username	Size
Addthis_button	Esambino	1,691 Kb
Countdown with Rings	Ewganoel	2,490 Kb
Wikipedia API	Coderpilot	2,802 Kb
Amazing CSS Menu with Notification Badges	Faizanasad	2,549 Kb
Tab Menus	Zephyr	3,180 Kb
Hover Animation from UNIQLO	Insprd	3,772 Kb
CSS Grid Overlay	Cliffpyles	3,090 Kb
Zeichensatz	Moklick	2,058 Kb
Slide In Panel	Vikvarg	2,811 Kb
STAR WARS LIGHTSABER	Francoiscoron	4,420 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!