SVG Donut Loading Spinner

Developer
Michael MartinSmucker
Size
3,876 Kb
Views
22,264
  1. SVG Donut Loading Spinner Previews
  2. SVG Donut Loading Spinner HTML Codes
  3. SVG Donut Loading Spinner CSS Codes
  4. SVG Donut Loading Spinner JS Codes

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 Previews
IQ Test

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
SVG Donut Loading Spinner - Script Codes
Home Page Home
Developer Michael MartinSmucker
Username mlms13
Uploaded September 28, 2022
Rating 3
Size 3,876 Kb
Views 22,264
Do you need developer help for SVG Donut Loading 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!

Michael MartinSmucker (mlms13) Script Codes
Name
Chrome 23 Flexbox Bug
Magic Color Picker
FancyArea Demo
CSS Stacked Paper Effect
A Pen by Michael MartinSmucker
Responsive nav collapses to a button
Toolbar Mockup
Chrome half-pixel bug
Simple Breadcrumbs
Backbone in Codepen
Create amazing video scripts 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!