SVG Progress Circle JS

Developer
Alex Pate
Size
5,122 Kb
Views
24,288
  1. SVG Progress Circle JS Previews
  2. SVG Progress Circle JS HTML Codes
  3. SVG Progress Circle JS CSS Codes
  4. SVG Progress Circle JS JS Codes

How do I make an svg progress circle js?

Https://alexpate.uk/journal/pure-svg-progress-circles/. What is a svg progress circle js? How do you make a svg progress circle js? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.

SVG Progress Circle JS Previews
IQ Test

SVG Progress Circle JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Progress Circle JS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="donut"> <svg width="240" height="240" xmlns="http://www.w3.org/2000/svg" class="donut__svg"> <circle id="donut-graph-x" class="donut__svg__scrim" r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/> <circle id="donut-graph" class="donut__svg__circle--one" r="90" cy="120" cx="120" stroke-width="4" stroke="url(#purple)" stroke-linejoin="round" stroke-linecap="round" fill="none"/> <defs> <linearGradient id="purple" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#7a5bcf"/> <stop offset="100%" stop-color="#8A6FD5"/> </linearGradient> </defs> </svg> <div class="donut__copy"> <span class="donut__title"> <span class="js-donut-figure"></span> <span class="donut__spic">%</span> </span> </div>
</div>
<span class="info"><a href="https://alexpate.uk/journal/pure-svg-progress-circles-javascript-part-2/" target="_blank">Accompanying article</a></span> <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 Progress Circle JS - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { margin: 0 0; padding: 0; height: 100%;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #212121; font-family: 'Roboto', Helvetica, Arial, sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
.donut { position: relative; width: 240px; height: 240px;
}
.donut__copy { text-align: center; width: 100%; height: 100%; padding-top: 68px; top: 0; left: 0; position: absolute;
}
.donut__title,
.donut__secondary { display: block; margin: 0; padding: 0;
}
.donut__title,
.donut__spic { color: #8a6fd5; font-weight: 200;
}
.donut__title { font-size: 79px; position: relative; -webkit-animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; opacity: 0; -webkit-transform: translateX(0); transform: translateX(0);
}
.donut__spic { position: absolute; top: 20px; font-size: 30px; line-height: 1em; content: "%"; -webkit-animation: donutTitleFadeRight 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; animation: donutTitleFadeRight 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px);
}
@-webkit-keyframes donutTitleFadeLeft { from { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } to { opacity: 1; -webkit-transform: translateX(-10px); transform: translateX(-10px); }
}
@keyframes donutTitleFadeLeft { from { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } to { opacity: 1; -webkit-transform: translateX(-10px); transform: translateX(-10px); }
}
@-webkit-keyframes donutTitleFadeRight { from { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes donutTitleFadeRight { from { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
.donut__svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.donut__svg__circle--one { stroke-dasharray: 565.48668; stroke-dashoffset: 565.48668; -webkit-transition: stroke-dashoffset 1200ms cubic-bezier(0.99, 0.01, 0.62, 0.94); transition: stroke-dashoffset 1200ms cubic-bezier(0.99, 0.01, 0.62, 0.94);
}
.info { font-size: 14px; color: #999; position: absolute; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; bottom: 40px; width: 100%; left: 0; text-align: center;
}
.info a { color: #999;
}

SVG Progress Circle JS - Script Codes JS Codes

'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var ProgressCircle = function () { function ProgressCircle(percent, radius, elementClass) { _classCallCheck(this, ProgressCircle); this._percent = percent; this._radius = radius; this._elementClass = elementClass; } ProgressCircle.prototype.calcDashOffset = function calcDashOffset() { var circumference = Math.PI * (2 * this.radius); return Math.floor(circumference - this.percent / 100 * circumference); }; ProgressCircle.prototype.createCSS = function createCSS() { document.querySelectorAll('.' + this._elementClass + ' .donut__svg .donut__svg__circle--one')[0].style.strokeDashoffset = this.calcDashOffset(); }; ProgressCircle.prototype.updateText = function updateText() { document.querySelectorAll('.' + this.elementClass + ' .js-donut-figure')[0].innerText = this.percent; }; ProgressCircle.prototype.updateFigure = function updateFigure(newStat) { this._percent = newStat; this.updateText(); this.createCSS(); }; ProgressCircle.prototype.init = function init() { var _this = this; this.updateText(); setTimeout(function () { _this.createCSS(); }, 1000); }; _createClass(ProgressCircle, [{ key: 'percent', get: function get() { return this._percent; } }, { key: 'radius', get: function get() { return this._radius; } }, { key: 'elementClass', get: function get() { return this._elementClass; return document.getElementsByClassName(this._elementClass)[0]; } }]); return ProgressCircle;
}();
var progress = new ProgressCircle(82, 90, 'donut');
progress.init();
// Want to dynamically update the donut?
// Try uncommenting the following lines:
// setTimeout(() => {
// progress.updateFigure(25);
// }, 3000);
SVG Progress Circle JS - Script Codes
SVG Progress Circle JS - Script Codes
Home Page Home
Developer Alex Pate
Username alexpate
Uploaded November 24, 2022
Rating 4.5
Size 5,122 Kb
Views 24,288
Do you need developer help for SVG Progress Circle JS?

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!

Alex Pate (alexpate) Script Codes
Name
CSS Colors
Steps List
Wobble Notification
Button Animation
Notifier Pulse
Whatthehack Pusher
Pulse Animation
A Pen by Alex Pate
Single Element Stacked Paper
Subtle Draw Nav Animation
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!