.loader-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1A1A1A;
    display: flex;
    align-items: center;     /* vertical center */
    justify-content: center; /* horizontal center */
    z-index: 99;          /* HIGH so nothing covers it */
}


.loader {
  position: relative;
  width: 75px;
  height: 100px;
  transform: scale(0.6);
  transform-origin: center;
}
.loader__bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.loader__bar:nth-child(1) {
  left: 0px;
  transform: scale(1, 0.2);
  animation: barUp1 4s infinite;
  background: #ff3b30; /* red */
}
.loader__bar:nth-child(2) {
  left: 15px;
  transform: scale(1, 0.4);
  animation: barUp2 4s infinite;
  background: #ff9500; /* orange */
}
.loader__bar:nth-child(3) {
  left: 30px;
  transform: scale(1, 0.6);
  animation: barUp3 4s infinite;
  background: #ffcc00; /* yellow */
}
.loader__bar:nth-child(4) {
  left: 45px;
  transform: scale(1, 0.8);
  animation: barUp4 4s infinite;
  background: #4cd964; /* green */
}
.loader__bar:nth-child(5) {
  left: 60px;
  transform: scale(1, 1);
  animation: barUp5 4s infinite;
  background: #007aff; /* blue */
}

.loader__ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  animation: ball 4s infinite;
  background: #fff;
}

/*@keyframes ball {
  0% { transform: translate(0, 0); }
  5% { transform: translate(8px, -14px); }
  10% { transform: translate(15px, -10px); }
  17% { transform: translate(23px, -24px); }
  20% { transform: translate(30px, -20px); }
  27% { transform: translate(38px, -34px); }
  30% { transform: translate(45px, -30px); }
  37% { transform: translate(53px, -44px); }
  40% { transform: translate(60px, -40px); }
  50% { transform: translate(60px, 0); }
  57% { transform: translate(53px, -14px); }
  60% { transform: translate(45px, -10px); }
  67% { transform: translate(37px, -24px); }
  70% { transform: translate(30px, -20px); }
  77% { transform: translate(22px, -34px); }
  80% { transform: translate(15px, -30px); }
  87% { transform: translate(7px, -44px); }
  90% { transform: translate(0, -40px); }
  100% { transform: translate(0, 0); }
}*/

@keyframes ball {
  0%   { transform: translate(0, 0);     background: #ff3b30; } /* bar 1 - red */
  10%  { transform: translate(15px, -10px); background: #ff9500; } /* bar 2 - orange */
  20%  { transform: translate(30px, -20px); background: #ffcc00; } /* bar 3 - yellow */
  30%  { transform: translate(45px, -30px); background: #4cd964; } /* bar 4 - green */
  40%  { transform: translate(60px, -40px); background: #007aff; } /* bar 5 - blue */
  50%  { transform: translate(60px, 0);     background: #007aff; } /* still at bar 5 */
  60%  { transform: translate(45px, -10px); background: #4cd964; } /* bar 4 */
  70%  { transform: translate(30px, -20px); background: #ffcc00; } /* bar 3 */
  80%  { transform: translate(15px, -30px); background: #ff9500; } /* bar 2 */
  90%  { transform: translate(0, -40px);    background: #ff3b30; } /* bar 1 */
  100% { transform: translate(0, 0);        background: #ff3b30; }
}


@keyframes barUp1 {
  0%, 40% { transform: scale(1, .2); }
  50%, 90% { transform: scale(1, 1); }
  100% { transform: scale(1, .2); }
}
@keyframes barUp2 {
  0%, 40% { transform: scale(1, .4); }
  50%, 90% { transform: scale(1, .8); }
  100% { transform: scale(1, .4); }
}
@keyframes barUp3 {
  0% { transform: scale(1, .6); }
  100% { transform: scale(1, .6); }
}
@keyframes barUp4 {
  0%, 40% { transform: scale(1, .8); }
  50%, 90% { transform: scale(1, .4); }
  100% { transform: scale(1, .8); }
}
@keyframes barUp5 {
  0%, 40% { transform: scale(1, 1); }
  50%, 90% { transform: scale(1, .2); }
  100% { transform: scale(1, 1); }
}

.loader-main {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.loader-main.show {
    opacity: 1;
    pointer-events: all;
}

.loader-main.hide {
    opacity: 0;
    pointer-events: none;
}