title: CSS SVG Path - Circular Progress Bar (small ammends)
body: <p>As you will see from the code below I have a lovely circular progress bar however I have a few questions and a little lost on how to achieve this (ideally I don't want to use any JS)</p>
  
  <ol>
  <li>I want to make the pink bar that goes around be curved and not
  flat, is this possible? like the edge of it. So instead of it being
  | it would be a little like ) at the start and end.</li>
  <li>The throbbing circle in the middle, is it possible for it to pause
  for like 1 second once animation is complete before it starts
  again?</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Load Progress Animation */
  
  @-webkit-keyframes load {
    0% {
      stroke-dashoffset: 0
    }
  }
  @-moz-keyframes load {
    0% {
      stroke-dashoffset: 0
    }
  }
  @keyframes load {
    0% {
      stroke-dashoffset: 0
    }
  }
  /* Qik Progress Container */
  
  .progress {
    position: relative;
    display: inline-block;
    padding: 0;
    text-align: center;
  }
  /* Item SVG */
  
  .progress svg {
    width: 4rem;
    height: 4rem;
  }
  .progress svg:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
  }
  .progress svg:nth-child(2) path {
    fill: none;
    stroke-width: 20;
    stroke-dasharray: 629;
    stroke: rgba(60, 99, 121, 0.9);
    -webkit-animation: load 8s;
    -moz-animation: load 8s;
    -o-animation: load 8s;
    animation: load 8s;
  }
  .pulse {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    background: #ff1251;
    position: absolute;
    top: 1.45rem;
    left: 1.45rem;
    -webkit-animation: pulse 0.6s linear infinite;
    -moz-animation: pulse 0.6s linear infinite;
    -ms-animation: pulse 0.6s linear infinite;
    animation: pulse 0.6s linear infinite;
  }
  @keyframes "pulse" {
    0% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -moz-transform: scale(0.8);
      -o-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
    }
    100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  @-moz-keyframes pulse {
    0% {
      -moz-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -moz-transform: scale(0.8);
      transform: scale(0.8);
    }
    100% {
      -moz-transform: scale(1);
      transform: scale(1);
    }
  }
  @-webkit-keyframes "pulse" {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @-ms-keyframes "pulse" {
    0% {
      -ms-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -ms-transform: scale(0.8);
      transform: scale(0.8);
    }
    100% {
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="progress"&gt;
    &lt;svg viewBox="-10 -10 220 220"&gt;
      &lt;g fill="none" stroke-width="20" transform="translate(100,100)"&gt;
        &lt;path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
    &lt;svg viewBox="-10 -10 220 220"&gt;
      &lt;path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"&gt;&lt;/path&gt;
    &lt;/svg&gt;
    &lt;div class="pulse"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>