.page-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.page-loading.active {
  display: flex;
}

/* loader */
.loading {
  display: none;
}
.loading.active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  background-color: transparent;
}
/* Balls */
.loading .circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px; 
  border-radius: 50%;
  background: #fff;
}
.loading .circle {
  margin-right: 20px;
}
/* First Ball */
.loading .circle:first-child {
  animation: upload 0.4s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #4285f4;
}
/* Second Ball */
.loading .circle:nth-child(2) {
  animation: upload 0.65s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #34a853;
}
/* Third Ball */
.loading .circle:nth-child(3) {
  animation: upload 0.55s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #fbbc05;
}
/* Fourth Ball */
.loading .circle:nth-child(4) {
  animation: upload 0.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #c8e5fd;
}
/* Fives Ball */
.loading .circle:nth-child(5) {
  animation: upload 0.65s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #d130ec;
}
/* Six Ball */
.loading .circle:nth-child(6) {
  animation: upload 0.6s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #a8e2db;
}
/* Fourth Ball */
.loading .circle:last-child {
  animation: upload 0.725s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
  background-color: #ea4335;
}
/*--- Animation Keyframes ---*/
/*-- Page Upload --*/
@keyframes opacity-change {
  from { opacity: 0; background-color: transparent; }
  to { opacity: 1; background-color: #1b1c2c; }
}
/*-- Balls Animation --*/
@keyframes upload {
  from { transform: translateY(35px); }
  to { transform: translateY(-35px); }
}