Since you're using SCSS, why not use a SCSS @for loop with :nth-child() for setting the animation delay? It would also remove the need for classes on your child elements.

SCSS:

@keyframes cellShrink {
  0% {
    width: 100%;
    height: 100%;
    opacity: 100%;
  }
  100% {
    width: 10%;
    height: 10%;
    opacity: 10%;
  }
}
.throbber-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  background-color: #2eb9e8;
  width: 10em;
  height: 10em;
}
.throbber-wrapper div {
  display: inline-block;
  background-color: #93e2ff;
  width: 0;
  height: 0;
  opacity: 0;
  animation: cellShrink 1000ms infinite;
}
@for $i from 1 through 16 {
  .throbber-wrapper div:nth-child(#{$i}) {
    animation-delay: #{($i - 1) * 62.5}ms;
  }
}

HTML:

<div class="throbber-wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Since you're using SCSS, why not use a SCSS @each loop with :nth-child() for setting the animation delay? It would also remove the need for classes on your child elements.

Store the animation order of elements in a list and loop over it. Use the index of your position in the loop for an :nth-child() selector, and the current value as the animation delay multiplier.

SCSS:

@keyframes cellShrink {
  0% {
    width: 100%;
    height: 100%;
    opacity: 100%;
  }
  100% {
    width: 10%;
    height: 10%;
    opacity: 10%;
  }
}
.throbber-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  background-color: #2eb9e8;
  width: 10em;
  height: 10em;
}
.throbber-wrapper div {
  display: inline-block;
  background-color: #93e2ff;
  width: 0;
  height: 0;
  opacity: 0;
  animation: cellShrink 1000ms infinite;
}
$order: 1, 2, 3, 4, 8, 7, 6, 5, 9, 10, 11, 12, 16, 15, 14, 13;
@each $block in $order {
  $n: index($order, $block);
  .throbber-wrapper div:nth-child(#{$n}) {
    animation-delay: #{($block - 1) * 62.5}ms;
  }
}

HTML:

<div class="throbber-wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>