SVG Circle Progress

Size
3,368 Kb
Views
60,720

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 Previews

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); }
});
SVG Circle Progress - Script Codes
SVG Circle Progress - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 4.5
Size 3,368 Kb
Views 60,720
Do you need developer help for SVG Circle Progress?

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!

Jon Christensen (JMChristensen) Script Codes
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!