Whirlpool Spinner with 4 sizes
How do I make an whirlpool spinner with 4 sizes?
More fun with css tranforms!!. What is a whirlpool spinner with 4 sizes? How do you make a whirlpool spinner with 4 sizes? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.
Whirlpool Spinner with 4 sizes Previews
Whirlpool Spinner with 4 sizes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Whirlpool Spinner with 4 sizes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="flex-centered blue"> <div class="ring-container large blue"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container medium blue"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container small blue"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container mini blue"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div>
</div>
<div class="flex-centered dark"> <div class="ring-container large dark"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container medium dark"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container small dark"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container mini dark"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div>
</div>
<div class="flex-centered orange"> <div class="ring-container large orange"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container medium orange"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container small orange"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container mini orange"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div>
</div>
<div class="flex-centered green"> <div class="ring-container large green"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container medium green"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container small green"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div> <div class="ring-container mini green"> <div class="ring outer-ring"></div> <div class="ring inner-ring one"></div> <div class="ring inner-ring two"></div> <div class="ring inner-ring three"></div> <div class="ring inner-ring four"></div> <div class="ring inner-ring five"></div> <div class="ring inner-ring size"></div> <div class="ring inner-ring seven"></div> <div class="ring inner-ring eight"></div> </div>
</div>
</body>
</html>
Whirlpool Spinner with 4 sizes - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { padding: 0; margin: 0;
}
.flex-centered { display: flex; justify-content: center; align-items: center;
}
.flex-centered.blue { background-color: #171738;
}
.flex-centered.dark { background-color: #403D39;
}
.flex-centered.orange { background-color: #334B7F;
}
.flex-centered.green { background-color: #540D6E;
}
.ring-container { position: relative; margin: 1em;
}
.ring-container.large { min-width: 200px; min-height: 200px;
}
.ring-container.medium { min-width: 150px; min-height: 150px;
}
.ring-container.small { min-width: 100px; min-height: 100px;
}
.ring-container.mini { min-width: 50px; min-height: 50px;
}
.ring-container.mini .inner-ring { border-left-width: 2px;
}
.ring-container .ring { border-radius: 50%; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 1s; border-left-style: solid;
}
.ring-container.blue .ring { border-color: #3423A6;
}
.ring-container.dark .ring { border-color: #0EAD69;
}
.ring-container.orange .ring { border-color: #EB5E28;
}
.ring-container.green .ring { border-color: ghostwhite;
}
.outer-ring { position: absolute; width: 100%; height: 100%; border: none !important;
}
.inner-ring { position: absolute; border-left-width: 3px;
}
.inner-ring.one { width: 90%; height: 90%; top: 5%; left: 5%; animation-name: rotate-neg; animation-duration: 1s;
}
.inner-ring.two { width: 80%; height: 80%; top: 10%; left: 10%; animation-name: rotate; animation-duration: 1.9s;
}
.inner-ring.three { width: 70%; height: 70%; top: 15%; left: 15%; animation-name: rotate-neg; animation-duration: 1.8s;
}
.inner-ring.four { width: 60%; height: 60%; top: 20%; left: 20%; animation-name: rotate; animation-duration: 1.7s;
}
.inner-ring.five { width: 50%; height: 50%; top: 25%; left: 25%; animation-name: rotate-neg; animation-duration: 1.6s;
}
.inner-ring.size { width: 40%; height: 40%; top: 30%; left: 30%; animation-name: rotate; animation-duration: 1.5s;
}
.inner-ring.seven { width: 30%; height: 30%; top: 35%; left: 35%; animation-name: rotate; animation-duration: 1.4s;
}
.inner-ring.eight { width: 20%; height: 20%; top: 40%; left: 40%; animation-name: rotate-neg; animation-duration: 1.3s;
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
@keyframes rotate-neg { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }
}
| Developer | Robert Lowe |
| Username | rlo206 |
| Uploaded | July 23, 2022 |
| Rating | 3.5 |
| Size | 3,473 Kb |
| Views | 44,528 |
Do you need developer help for Whirlpool Spinner with 4 sizes?
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!
Robert Lowe (rlo206) Script Codes
| Name | Size |
| Simple changelog display with AngularJS and Flexbox | 7,502 Kb |
| Editable Table Concept | 7,026 Kb |
| Dynamic UI with AngularJS attributes | 5,934 Kb |
| Learning to style range inputs | 4,175 Kb |
| The Rainball | 4,656 Kb |
| Customizable ripples with angular | 4,825 Kb |
| Animated slider in pure angular | 5,111 Kb |
| A Pen by Robert Lowe | 4,312 Kb |
| Windows 10 toggle button directive | 4,256 Kb |
| Fly-Through-Loader | 2,936 Kb |
Create amazing love letters 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 |
| Scroll Arrow | Robooneus | 4,437 Kb |
| Exploding Text | Jjmartucci | 4,749 Kb |
| Cake | Kennyname | 7,220 Kb |
| Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| Wrap_Test | Mscfourn | 7,503 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Countdown Timer | Massiebn | 3,001 Kb |
| CSS Letter animations | Sladix | 2,116 Kb |
| Slide In Panel | Vikvarg | 2,811 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!