Pure CSS Radial w/ MultiCircle

A pure CSS Radial Solution

by Stephen Irving

HTML

<div class="load-wrapper">
  <div class="pie-wrapper" data-anim="base wrapper">
    <div class="circle" data-anim="base left"></div>
    <div class="circle" data-anim="base right"></div>   
  </div>
  <div class="inner-pie-wrapper">
    <div class="inner-circle" data-anim="base left"></div>
    <div class="inner-circle" data-anim="base right"></div>
  </div>
</div>

CSS

/* The basic styling */
.load-wrapper {
  width: 300px;  /* Sets the width of the wrapper */
  height: 300px; /* Sets the height of the wrapper */
  display: flex; /* Sets the wrapper to flex */
  flex-direction: row; /* Sets to flex by row */
  align-items: center; /* Align content vertically in wrapper */
  justify-content: center; /* Align content horizontally in wrapper*/

}

.pie-wrapper {
  width: 100px;  /* Sets the width of the progress bar */
  height: 100px; /* Sets the height of the progress bar. Set height equal to width */
  position: absolute; /* Enables clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
.inner-pie-wrapper {
  width: 50px;  /* Sets the width of the progress bar */
  height: 50px; /* Sets the height of the progress bar. Set height equal to width */
  position: absolute; /* Enables clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}

/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;  /* Set to 80% of wrapper width */
  height: 80px; /* Set to 80% of wrapper width */
  border: 10px double #df1f27; /* Set to 10% of wrapper width and the color desired */
  border-radius: 50px; /* Set to 50% of wrapper width */
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

.inner-circle {
  width: 40px;  /* Set to 80% of wrapper width */
  height: 40px; /* Set to 80% of wrapper width */
  border: 5px double #df1f27; /* Set to 10% of wrapper width and the color desired */
  border-radius: 50px; /* Set to 50% of wrapper width */
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
  
}


/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Holds the last keyframe */
  -webkit-animation-timing-function: linear; /* Linear animation...