Pure segmented CSS SVG Doughnuts

Question

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?