<div id="loading">
  <div class="fol">
    <div class="cir" id="c1"></div>
    <div class="cir" id="c2"></div>
    <div class="cir" id="c3"></div>
    <div class="cir" id="c4"></div>
  </div>
</div>

@use "sass:math" as math;

html {
  min-height: 100%;
}
body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  background: #25ad6c;
}

#loading {
  width: 60px;
  height: 60px;
  transition: all 0.3s ease-out;
  position: absolute;
  top: 49%;
  left: 50%;
  z-index: 3;
}

.fol {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 14px;
  left: 14px;
  position: relative;
  margin: -14px 0 0 -14px;
}

.cir {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  top: 30px;
  left: 60px;
  animation-name: move;
  animation-count: infinite;
}


#c1 { animation-duration: 0.6s; }
#c2 { animation-duration: 0.8s; }
#c3 { animation-duration: 1.2s; }
#c4 { animation-duration: 2.4s; }