JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris/1.16.1/iris.min.css">
<p>theme colors</p>
<div class="iris-loading font-color--primary font-color--secondary" data-size="small" role="alert" aria-live="assertive">
  <div class="iris-loading-alert-text sr-only"></div>
  <svg class="iris-loading-svg" viewBox="25 25 50 50">
    <circle class="iris-loading-path" cx="50" cy="50" r="20" />
  </svg>
</div>
<div class="iris-loading font-color--primary font-color--secondary" role="alert" aria-live="assertive">
  <div class="iris-loading-alert-text sr-only"></div>
  <svg class="iris-loading-svg" viewBox="25 25 50 50">
    <circle class="iris-loading-path" cx="50" cy="50" r="20" />
  </svg>
</div>
<div class="iris-loading font-color--primary font-color--secondary" data-size="large" role="alert" aria-live="assertive">
  <div class="iris-loading-alert-text sr-only"></div>
  <svg class="iris-loading-svg" viewBox="25 25 50 50">
    <circle class="iris-loading-path" cx="50" cy="50" r="20" />
  </svg>
</div>

<div class="iris-loading font-color--primary font-color--secondary" data-size="large" role="alert" aria-live="assertive">
  <div class="iris-loading-alert-text sr-only"></div>
  <svg class="iris-loading-svg" viewBox="0 0 50 50">
    <rect class="iris-loading-path" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  </svg>
</div>

<br /><br />

<p>sizes</p>
<div class="iris-loading" data-size="small" role="alert" aria-live="assertive">
  <div class="iris-loading-alert-text sr-only"></div>
  <svg class="iris-loading-svg" viewBox="25 25 50 50">
    <circle class="iris-loading-path" cx="50" cy="50" r="20" />
  </svg>
</div>
<div class="iris-loading" role="alert" aria-live="assertive">
  <div class="iris-loading-alert-text sr-only"></div>
  <svg class="iris-loading-svg" viewBox="25 25 50 50">
    <circle class="iris-loading-path" cx="50" cy="50" r="20" />
  </svg>
</div>
<div class="iris-loading" data-size="large"...

SCSS

.font-color--primary {
  --font-color--primary: red;
  color: red !important;
}
.font-color--secondary {
  --font-color--secondary: blue;
  color: blue !important;
}

.iris-loading {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  width: 64px;
  
  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  
  &[data-size="small"] {
    width: 32px !important;
    .iris-loading-path {
      stroke-width: 6;
    }
  }
  &[data-size="medium"] {
    width: 64px !important;
    .iris-loading-path {
      stroke-width: 4;
    }
  }
  &[data-size="large"] {
    width: 128px !important;
    .iris-loading-path {
      stroke-width: 3;
    }
  }
  &[data-overlay] {
    bottom: 0;
    left: 0;
    margin: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
  }
}

.iris-loading-svg {
  animation: iris-loading-rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  stroke: currentColor;
}

.iris-loading-path {
  fill: none;
  stroke-dasharray: 100, 200;
  stroke-dashoffset: 0;
  animation: iris-loading-dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.iris-loading.font-color--primary.font-color--secondary .iris-loading-path{
  animation: iris-loading-dash 1.5s ease-in-out infinite, iris-loading-theme-colors 3s ease-in-out infinite;
}

@keyframes iris-loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes iris-loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes iris-loading-theme-colors {
  0%,
  100%{
    stroke: var(--font-color--primary);
  }
  50% {
    stroke: var(--font-color--secondary);
  }
}