SVG Donut Loading Spinner
How do I make an svg donut loading spinner?
What is a svg donut loading spinner? How do you make a svg donut loading spinner? This script and codes were developed by Michael MartinSmucker on 28 September 2022, Wednesday.
SVG Donut Loading Spinner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Donut Loading Spinner</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #bad; margin: 40px; text-align: center;
}
.spinner { height: 42px; width: 42px; margin: 0 auto;
}
.loading__bg,
.loading__spin { stroke-opacity: 0.2; stroke: #fff; stroke-width: 6px;
}
.loading__spin { stroke-opacity: 0.5; transition: stroke-dashoffset 2s linear;
}
.loading__spin.infinite { animation: spinforever 2s linear infinite; transform-origin: center;
}
.controls { color: #fff; margin-top: 20px; font-size: 26px; font-family: "Signika", sans-serif;
}
.controls button { background: none; border: 0; display: inline; font-size: 42px;
}
.controls button:focus { outline: 0;
}
.controls button:hover { text-shadow: 1px 1px 0 #a088d0, 2px 2px 0 #a088d0, 3px 3px 1px #a088d0;
}
@-moz-keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
@-webkit-keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
@-o-keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
@keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> .spinner
.controls | Spin For: button 3s button 5s button 10s button Ever <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SVG Donut Loading Spinner - Script Codes CSS Codes
body { background: #bad; margin: 40px; text-align: center;
}
.spinner { height: 42px; width: 42px; margin: 0 auto;
}
.loading__bg,
.loading__spin { stroke-opacity: 0.2; stroke: #fff; stroke-width: 6px;
}
.loading__spin { stroke-opacity: 0.5; transition: stroke-dashoffset 2s linear;
}
.loading__spin.infinite { animation: spinforever 2s linear infinite; transform-origin: center;
}
.controls { color: #fff; margin-top: 20px; font-size: 26px; font-family: "Signika", sans-serif;
}
.controls button { background: none; border: 0; display: inline; font-size: 42px;
}
.controls button:focus { outline: 0;
}
.controls button:hover { text-shadow: 1px 1px 0 #a088d0, 2px 2px 0 #a088d0, 3px 3px 1px #a088d0;
}
@-moz-keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
@-webkit-keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
@-o-keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
@keyframes spinforever { from { transform: rotate(0turn); } to { transform: rotate(1turn); }
}
SVG Donut Loading Spinner - Script Codes JS Codes
(function() { "use strict"; var namespace = 'http://www.w3.org/2000/svg', spinContainer = document.querySelector('.spinner'); // start an initial infinite spin spin(spinContainer); function makePath(cls) { var path = document.createElementNS(namespace,"path"); path.setAttribute('d', 'M 20, 20 m 0, -17 a 17, 17 0 1,1 0,34 a 17,-17 0 1,1 0,-34'); path.setAttribute('fill', 'none'); path.classList.add(cls); return path; } function spin(parent, time) { var svg = document.createElementNS(namespace, "svg"), bg = svg.appendChild(document.createElementNS(namespace, 'g')), spinner = svg.appendChild(document.createElementNS(namespace, 'g')), bgPath = bg.appendChild(makePath('loading__bg')), spinnerPath = spinner.appendChild(makePath('loading__spin')), pathLength = bgPath.getTotalLength(); parent.appendChild(svg); if (time) { spinnerPath.style.strokeDasharray = pathLength + ' ' + pathLength; spinnerPath.style.strokeDashoffset = pathLength; spinnerPath.getBoundingClientRect(); // transition it spinnerPath.style.transitionDuration = (time || 2) + 's'; spinnerPath.style.strokeDashoffset = '0'; } else { // set the class so it animates spinnerPath.classList.add('infinite'); spinnerPath.style.strokeDasharray = pathLength / 4 + ' ' + pathLength / 4; } } document.querySelector('.controls').addEventListener('click', function (e) { if (!e.target || e.target.nodeName.toLowerCase() !== "button") return; if (spinContainer.firstChild) spinContainer.removeChild(spinContainer.firstChild); spin(spinContainer, parseFloat(e.target.textContent)); }, false);
})();
Developer | Michael MartinSmucker |
Username | mlms13 |
Uploaded | September 28, 2022 |
Rating | 3 |
Size | 3,876 Kb |
Views | 22,264 |
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 |
Drinking Habits Mockup | 34,818 Kb |
Responsive nav collapses to a button | 3,329 Kb |
Backbone in Codepen | 1,608 Kb |
CSS Stacked Paper Effect | 3,031 Kb |
FancyArea Demo | 9,550 Kb |
Fancy Textarea | 3,236 Kb |
Chrome half-pixel bug | 2,351 Kb |
4-up Grid Block | 2,213 Kb |
Boxes and Headings | 2,894 Kb |
Sticker Tiles | 7,732 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 |
The CodePen Logo | Kindofone | 4,259 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Eunice A | Ejbronze | 2,203 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
CSS background-size - GSAP | Jonathan | 2,209 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!