CSS SVG Path - Circular Progress Bar (small ammends)

Question

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)

1. 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.
2. 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?

/* 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);
  }
}

<div class="progress">
  <svg viewBox="-10 -10 220 220">
    <g fill="none" stroke-width="20" transform="translate(100,100)">
      <path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
    </g>
  </svg>
  <svg viewBox="-10 -10 220 220">
    <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"></path>
  </svg>
  <div class="pulse"></div>
</div>

Answer 1

I've re-written the entire code.

For your first question, you could simply use stroke-linecap="round".

For the second one, you will have to add an extra @keyframes rule for the delay.

body {
  background: #072237;
}
h3 {
  color: #ffffff;
}
#loader {
  position: relative;
  width: 80px;
  height: 80px;
}
#ring {
  -webkit-animation: load 6s 1 forwards;
  animation: load 6s 1 forwards;
}
#circle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background: #FF1251;
  border-radius: 50%;
  transform: scale(0.8);
  -webkit-animation: pulse 1.2s 3;
  animation: pulse 1.2s 3;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@-webkit-keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div id="loader">
  <svg height="80" width="80" viewBox="-10 -10 220 220">
    <path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
    <path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
  </svg>
  <div id="circle"></div>
</div>