Pure CSS Spinner
How do I make an pure css spinner?
Tweak the top four values and change up the timing.. What is a pure css spinner? How do you make a pure css spinner? This script and codes were developed by James Nowland on 31 October 2022, Monday.
Pure CSS Spinner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Spinner</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Comments are just to fix whitespace with inline-block -->
<div class="Spinner"><!-- --><div class="Spinner-line Spinner-line--1"><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!-- --></div><!-- --><div class="Spinner-line-ticker"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!-- --></div><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!-- --></div><!-- --></div><!-- --><div class="Spinner-line Spinner-line--2"><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!-- --></div><!-- --><div class="Spinner-line-ticker"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!-- --></div><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!-- --></div><!-- --></div><!-- --><div class="Spinner-line Spinner-line--3"><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!-- --></div><!-- --><div class="Spinner-line-ticker"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!-- --></div><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!-- --></div><!-- --></div><!-- --><div class="Spinner-line Spinner-line--4"><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!-- --></div><!-- --><div class="Spinner-line-ticker"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!-- --></div><!-- --><div class="Spinner-line-cog"><!-- --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!-- --></div><!-- --></div><!--
--></div><!--/spinner --> <script src="js/index.js"></script>
</body>
</html>
Pure CSS Spinner - Script Codes CSS Codes
.Spinner { height: 28px; left: 50%; margin-left: -14px; position: absolute; top: 45%; width: 28px; /* Spins external container */ -webkit-animation: container-rotate 1600ms linear infinite; animation: container-rotate 1600ms linear infinite;
}
.Spinner-line { position: absolute; width: 100%; height: 100%; opacity: 0;
}
.Spinner-line--1 { border-color: #9b0062; -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-1-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-1-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.Spinner-line--2 { border-color: #ff008b; -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-2-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-2-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.Spinner-line--3 { border-color: #bcbaad; -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-3-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-3-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.Spinner-line--4 { border-color: #cc006f; -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-4-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-4-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.Spinner-line-cog { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit;
}
.Spinner-line-cog-inner { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 200%; box-sizing: border-box; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent; border-radius: 50%; -webkit-animation: none; animation: none;
}
.Spinner-line-cog-inner--left { border-right-color: transparent; -webkit-transform: rotate(129deg); transform: rotate(129deg); -webkit-animation: left-spin 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: left-spin 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.Spinner-line-cog-inner--right { left: -100%; border-left-color: transparent; -webkit-transform: rotate(-129deg); transform: rotate(-129deg); -webkit-animation: right-spin 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: right-spin 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.Spinner-line-cog-inner--center { width: 1000%; left: -450%;
}
.Spinner-line-ticker { position: absolute; box-sizing: border-box; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit;
}
@-webkit-keyframes container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); }
}
@keyframes fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); }
}
@-webkit-keyframes left-spin { 0% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); }
}
@keyframes left-spin { 0% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); }
}
@-webkit-keyframes right-spin { 0% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); }
}
@keyframes right-spin { 0% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); }
}
@-webkit-keyframes line-1-fade-in-out { 0% { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } to { opacity: 1; }
}
@keyframes line-1-fade-in-out { 0% { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } to { opacity: 1; }
}
@-webkit-keyframes line-2-fade-in-out { 0% { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; }
}
@keyframes line-2-fade-in-out { 0% { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; }
}
@-webkit-keyframes line-3-fade-in-out { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; }
}
@keyframes line-3-fade-in-out { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; }
}
@-webkit-keyframes line-4-fade-in-out { 0% { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } to { opacity: 0; }
}
@keyframes line-4-fade-in-out { 0% { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } to { opacity: 0; }
}
body, html { width: 100%; height: 100%; margin: 0; -webkit-user-select: none; color: #222; font-family: Roboto, sans-serif; font-size: 13px; -webkit-font-smoothing: antialiased; overflow-y: hidden;
}
Pure CSS Spinner - Script Codes JS Codes
// Inspired by the google drive pure css preloader.
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 4.5 |
Size | 3,909 Kb |
Views | 12,144 |
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!
Name | Size |
Responsive Typography for dummies. | 6,869 Kb |
Hamburger and Search CSS Animations | 4,173 Kb |
Login Form CSS only validation | 5,739 Kb |
Download Rebound | 10,865 Kb |
Lorem pixel Images | 2,290 Kb |
Letting.js Demo using vanilla js. | 2,298 Kb |
Step 3 | 3,874 Kb |
Outer Gradient Circle Progress | 17,247 Kb |
CSS3 Stroke and Gradient Text | 2,577 Kb |
A Pen by James Nowland | 6,998 Kb |
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!
Name | Username | Size |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Light Switch | Bartuc | 4,933 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
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!