Generated by SassMeister.com.

input.scss

@use "sass:map";

.container-outer {
  display: flex;
  padding: 32px;
  align-items: center;
  flex-direction: column;
  background-color: lightblue;
}

.container-inner {
  opacity: 0.4;
  width: 40px;
  transition: opacity 1s;
  display: inline-block;
  background-color: lightcyan;
}

.container-dots {
  width: 100%;
  position: relative;
  padding-top: 100%;
  background-color: lightgreen;
}

.dot {
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background-color: #000;
  animation-duration: 0.6s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0, 0.5, 0.7, 1);
}

$dots: (
    dot1: (
      "size": 9.9325,
      "left": 0,
      "bottom": 29.14
    ),
    dot2: (
      "size": 15.285,
      "left": 13.335,
      "bottom": 42.3475
    ),
    dot3: (
      "size": 22.27,
      "left": 37.5875,
      "bottom": 48.59
    ),
    dot4: (
      "size": 28.0525,
      "left": 71.9475,
      "bottom": 35.025
    )
);

@each $dot, $map in $dots {
    $outerDiff: 100 - map.get($map, "size") - map.get($map, "bottom");
    $innerDiff: 100 / map.get($map, "size") * $outerDiff;
    $animationName: #{$dot};
    $index: index($dots, $dot $map);


    .dot-#{$index} {
        left: map.get($map, "left") + 0%;
        bottom: map.get($map, "bottom") + 0%;
        width: map.get($map, "size") + 0%;
        height: map.get($map, "size") + 0%;
        animation-name: #{$animationName};
        animation-delay: $index * 0.1s;
    }
    
        
    @keyframes #{$dot} {
      0% {
        transform: translate3d(0, 0, 0);
      }
      100% {
        transform: translate3d(0, -$innerDiff + 0%, 0);
      }
    }
}


// $dot1: (
//   "size": 9.9325,
//   "left": 0,
//   "bottom": 29.14
// );
// $dot1-outer-diff: 100 - map.get($dot1, "size") - map.get($dot1, "bottom");
// $dot1-inner: 100 / map.get($dot1, "size");
// $dot1-inner-diff: $dot1-inner * $dot1-outer-diff;
// .dot-1 {
//   left: 0%;
//   width: 9.9325%;
//   bottom: 29.14%;
//   height: 9.9325%;
//   animation-name: dot1;
//   animation-delay: 0s;
// }
// @keyframes dot1 {
//   0% {
//     transform: translate3d(0, 0, 0);
//   }
//   100% {
//     transform: translate3d(0, -$dot1-inner-diff + 0%, 0);
//   }
// }

markup.html

<div class="container-outer">
  <div class="container-inner">
    <div class="container-dots">
      <div class="dot dot-1"></div>
      <div class="dot dot-2"></div>
      <div class="dot dot-3"></div>
      <div class="dot dot-4"></div>
    </div>
  </div>
  <p class="loading-message"></p>
</div>

output.css

.container-outer {
  display: flex;
  padding: 32px;
  align-items: center;
  flex-direction: column;
  background-color: lightblue;
}

.container-inner {
  opacity: 0.4;
  width: 40px;
  transition: opacity 1s;
  display: inline-block;
  background-color: lightcyan;
}

.container-dots {
  width: 100%;
  position: relative;
  padding-top: 100%;
  background-color: lightgreen;
}

.dot {
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background-color: #000;
  animation-duration: 0.6s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0, 0.5, 0.7, 1);
}

.dot-1 {
  left: 0%;
  bottom: 29.14%;
  width: 9.9325%;
  height: 9.9325%;
  animation-name: dot1;
  animation-delay: 0.1s;
}

@keyframes dot1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -613.4155549962%, 0);
  }
}
.dot-2 {
  left: 13.335%;
  bottom: 42.3475%;
  width: 15.285%;
  height: 15.285%;
  animation-name: dot2;
  animation-delay: 0.2s;
}

@keyframes dot2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -277.1835132483%, 0);
  }
}
.dot-3 {
  left: 37.5875%;
  bottom: 48.59%;
  width: 22.27%;
  height: 22.27%;
  animation-name: dot3;
  animation-delay: 0.3s;
}

@keyframes dot3 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -130.848675348%, 0);
  }
}
.dot-4 {
  left: 71.9475%;
  bottom: 35.025%;
  width: 28.0525%;
  height: 28.0525%;
  animation-name: dot4;
  animation-delay: 0.4s;
}

@keyframes dot4 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -131.6192852687%, 0);
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}