SVG Circle Progress
How do I make an svg circle progress?
A circle progress bar made with CSS transitions, SVG, and some JS to control the percentage of completion.. What is a svg circle progress? How do you make a svg circle progress? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.
SVG Circle Progress - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Circle Progress</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400'> <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! */
#svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; stroke: #666; stroke-width: 1em;
}
#svg #bar { stroke: #FF9F1E;
}
#cont { display: block; height: 200px; width: 200px; margin: 2em auto; box-shadow: 0 0 1em black; border-radius: 100%; position: relative;
}
#cont:after { position: absolute; display: block; height: 160px; width: 160px; left: 50%; top: 50%; box-shadow: inset 0 0 1em black; content: attr(data-pct)"%"; margin-top: -80px; margin-left: -80px; border-radius: 100%; line-height: 160px; font-size: 2em; text-shadow: 0 0 0.5em black;
}
input { color: #000;
}
/* Make things perty */
html { height: 100%;}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;}
h1, h2{ margin: 0; text-transform: uppercase;text-shadow: 0 0 0.5em black;}
h2 { font-weight: 300}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>SVG Circle Progress</h1>
<h2>Based off of CSS3 circle progress bars</h2>
<div id="cont" data-pct="100">
<svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>
</div>
<label for="percent">Type a percent!</label>
<input id="percent" name="percent"> <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 Circle Progress - Script Codes CSS Codes
#svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; stroke: #666; stroke-width: 1em;
}
#svg #bar { stroke: #FF9F1E;
}
#cont { display: block; height: 200px; width: 200px; margin: 2em auto; box-shadow: 0 0 1em black; border-radius: 100%; position: relative;
}
#cont:after { position: absolute; display: block; height: 160px; width: 160px; left: 50%; top: 50%; box-shadow: inset 0 0 1em black; content: attr(data-pct)"%"; margin-top: -80px; margin-left: -80px; border-radius: 100%; line-height: 160px; font-size: 2em; text-shadow: 0 0 0.5em black;
}
input { color: #000;
}
/* Make things perty */
html { height: 100%;}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;}
h1, h2{ margin: 0; text-transform: uppercase;text-shadow: 0 0 0.5em black;}
h2 { font-weight: 300}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;}
SVG Circle Progress - Script Codes JS Codes
$('#percent').on('change', function(){ var val = parseInt($(this).val()); var $circle = $('#svg #bar'); if (isNaN(val)) { val = 100; } else{ var r = $circle.attr('r'); var c = Math.PI*(r*2); if (val < 0) { val = 0;} if (val > 100) { val = 100;} var pct = ((100-val)/100)*c; $circle.css({ strokeDashoffset: pct}); $('#cont').attr('data-pct',val); }
});
Developer | Jon Christensen |
Username | JMChristensen |
Uploaded | August 03, 2022 |
Rating | 4.5 |
Size | 3,368 Kb |
Views | 60,720 |
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 |
Basic Snap.svg JS Animation | 5,622 Kb |
Responsive SVG Overlay | 2,674 Kb |
Simple CSS Loaders | 3,841 Kb |
SVG Button Animation | 4,333 Kb |
FitText.js Demo | 1,897 Kb |
Custom Stagger Start Point | 4,001 Kb |
SVG Animated Stroke Dash | 3,623 Kb |
CSS Transition End Sequence | 4,980 Kb |
3D Cube | 2,543 Kb |
Google Button Ripple | 3,524 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 |
Vue.js Starter | Andymerskin | 1,268 Kb |
Sticky div | Kaslab | 2,225 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 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!