I'am looking for a pure dynamic css3 or svg doughnut step chart as shown in the image below.
I tried to make it with svg but i can't make it work.
.donut-chart { width: 190px; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } @import url(https://fonts.googleapis.com/css?family=Montserrat:400); .chart-text { font: 16px/1.4em "Montserrat", Arial, sans-serif; fill: #000; -moz-transform: translateY(0.25em); -ms-transform: translateY(0.25em); -webkit-transform: translateY(0.25em); transform: translateY(0.25em); } .chart-number { font-size: 0.6em; line-height: 1; text-anchor: middle; -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); } .chart-label { font-size: 0.2em; text-transform: uppercase; text-anchor: middle; -moz-transform: translateY(0.7em); -ms-transform: translateY(0.7em); -webkit-transform: translateY(0.7em); transform: translateY(0.7em); }<div class="donut-chart"> <svg viewBox="0 0 42 42" class="donut"> <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle> <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle> <!-- first chart is from 0-60% --> <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="green" stroke-width="3" stroke-dasharray="33 67" stroke-dashoffset="25"></circle> <!-- second chart to start at 60% and go to 90% --> <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="red" stroke-width="3" stroke-dasharray="33 67" stroke-dashoffset="-9"></circle> </svg> </div>How do I add space between steps? I also need to add a gradient background color from the top start to the end of the donut, any help?
