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);
})();
![SVG Donut Loading Spinner - Script Codes](http://shots.codepen.io/mlms13/pen/MYLLpZ-512.jpg)
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 |
Boxes and Headings | 2,894 Kb |
Magic Color Picker | 3,768 Kb |
Simple Breadcrumbs | 3,411 Kb |
Toolbar Mockup | 4,967 Kb |
Sticker Tiles | 7,732 Kb |
Table with rounded corners | 1,953 Kb |
Drinking Habits Mockup | 26,173 Kb |
CSS3 ribbons with Unicode icons | 2,477 Kb |
Drinking Habits Mockup | 34,818 Kb |
Panel Slider | 5,242 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 |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Project_one | MOHIM | 9,592 Kb |
My three.js practice | Esambino | 3,203 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Minimelephant | Smashlee | 2,507 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!