title: CSS radial / circular progress indicator with a transparent middle
body: <p>I'd like to make a radial progress indicator with css that has it's middle circle transparent. See here: <a href="http://codepen.io/geedmo/pen/InFfd" rel="nofollow noreferrer">http://codepen.io/geedmo/pen/InFfd</a> – it's a perfect example of what I want to do but the middle (<code>.overlay</code>) has background-color which overlays the bigger circle. However, I'd like to have it transparent (the bigger circle would have transparent middle too). How to do it?</p>
  
  <pre><code>&lt;div class="wrap"&gt;
  
  &lt;div class="progress-radial progress-25"&gt;
    &lt;div class="overlay"&gt;25%&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="progress-radial progress-50"&gt;
    &lt;div class="overlay"&gt;50%&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="progress-radial progress-75"&gt;
    &lt;div class="overlay"&gt;75%&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="progress-radial progress-90"&gt;
    &lt;div class="overlay"&gt;90%&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>// Colors
  $barColor: tomato
  $overlayColor: #fffde8
  $backColor: #2f3439
  
  @import url(http://fonts.googleapis.com/css?family=Noto+Sans)
  
  body
    padding: 30px 0
    background-color: $backColor
    font-family: 'Noto Sans', sans-serif
  
  .wrap
    width: 600px
    margin: 0 auto
  
  /* -------------------------------------
   * Bar container
   * ------------------------------------- */
  .progress-radial
    float: left
    margin-right: 30px
    position: relative
    width: 100px
    height: 100px
    border-radius: 50%
    border: 2px solid $backColor // remove gradient color
  
  
  /* -------------------------------------
   * Optional centered circle w/text
   * ------------------------------------- */  
  .progress-radial .overlay
    position: absolute
    width: 60px
    height: 60px
    background-color: $overlayColor
    border-radius: 50%
    margin-left: 20px
    margin-top: 20px
    text-align: center
    line-height: 60px
    font-size: 16px
  
  /* -------------------------------------
   * Mixin for progress-% class
   * ------------------------------------- */
  
  $step: 5 // step of % for created classes
  
  $loops: round(100 / $step)
  $increment: 360 / $loops
  $half: round($loops / 2)
  @for $i from 0 through $loops
    .progress-#{$i*$step}
      @if $i &lt; $half
        $nextdeg: 90deg + ( $increment * $i )
        border-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
      @else
        $nextdeg: -90deg + ( $increment * ( $i - $half ) )
        border-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)
  </code></pre>
  
  <p>This is the result I'd like to get:</p>
  
  <p><img src="https://i.stack.imgur.com/TOMca.png" alt="result"></p>