Pure CSS Spinner

Developer
Size
3,909 Kb
Views
12,144

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 Previews

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.
Pure CSS Spinner - Script Codes
Pure CSS Spinner - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 4.5
Size 3,909 Kb
Views 12,144
Do you need developer help for Pure CSS Spinner?

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!

James Nowland (jnowland) Script Codes
Create amazing sales emails 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!