Pure CSS3 or SVG Animated Donut Chart
I am looking for a clean animated CSS3 or SVG donut diagram.
- You must have a fill color for the middle circle.
- the outer circle, which should be separated by gray and blue, i.e.: blue - 80%, gray - 20% of the rest.
- need text in the middle of the circle.
I found one example http://jsfiddle.net/4azpfk3r/
Can anyone help create / edit above what I need? Its half way.
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
thank
+6
source to share
1 answer
Try this, it uses stroke-dasharray
to create strokes 251.2 cm long. See here for more information. The stroke-dashoffset attribute specifies the distance in the dash pattern to start the dash, see here
<svg width="100%" height="100%" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="tomato"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Here the stroke fills 80% (calculated using 251.2 - 251.2 * 80/100, 251.2 is the perimeter of the circle calculated using 2 * 3.14 * 40). those. stroke-dashoffset = perimeter - perimeter * amount/100
also install stroke-dasharray
in perimeter
. perimeter = 2 * 3.14 * radius
...
You can check out this blog post that explains making donut charts easily.
Look at a 50% completed circle
<svg width="100%" height="100%" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="tomato"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Demo with multiple rings:
<svg width="300px" height="300px" viewbox="0 0 100 100">
<!-- Center color -->
<circle cx="50" cy="50" r="40" fill="#eee"/>
<!-- Default color of ring -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<!-- Progress -->
<!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
<!-- 100% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"/>
<!-- 80% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
<!-- 70% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"/>
<!-- 50% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
<!-- 40% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"/>
<!-- 20% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"/>
<!-- Center Text -->
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Demo with animation (not tested in all browsers)
$(".progress").each(function() {
var dataProgress = $(this).attr("stroke-dashoffset");
$(this).attr("stroke-dashoffset", "251.2");
$(this).animate({
"stroke-dashoffset": dataProgress
},1500)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="300px" height="300px" viewbox="0 0 100 100">
<!-- Center color -->
<circle cx="50" cy="50" r="40" fill="#eee"/>
<!-- Default color of ring -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="white"/>
<!-- Progress -->
<!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
<!-- 100% fill -->
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"/>
<!-- 80% fill -->
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
<!-- 70% filled -->
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"/>
<!-- 50% filled -->
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
<!-- 40% filled -->
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"/>
<!-- 20% filled -->
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"/>
<!-- Center Text -->
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Solution using jquery:
Give data-fill=amount
for each .progress
a jquery does the rest
var radius = parseInt($("#radius").attr("r")) // Get the radius of the circle
var perimeter = 2 * 3.14 * radius;
$(".progress").each(function(){
var amount = parseFloat($(this).attr("data-fill"));
var fillAmount = perimeter - perimeter * amount / 100;
$(this).attr({
"stroke-dasharray":perimeter,
"stroke-dashoffset":fillAmount
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="300px" height="300px" viewbox="0 0 100 100">
<!-- Center color -->
<circle cx="50" cy="50" r="40" fill="#eee" id="radius"/>
<!-- Default color of ring -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<!-- Progress -->
<!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
<!-- 100% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" data-fill="100" class="progress"/>
<!-- 80% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" data-fill="80" class="progress"/>
<!-- 70% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" data-fill="70" class="progress"/>
<!-- 50% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" data-fill="50" class="progress"/>
<!-- 40% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" data-fill="40" class="progress"/>
<!-- 20% filled -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" data-fill="20" class="progress"/>
<!-- Center Text -->
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
+30
source to share