.loading {
  background-color: #000;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.pop-show {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.cicle {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cicle-1 {
  width: 300px;
  height: 300px;
  border-width: 10px;
  border-style: solid;
  border-top-color: #fd2002;
  border-left-color: transparent;
  border-bottom-color: #1230ff;
  border-left-color: transparent;
  animation: loagding 4s ease-in-out infinite alternate;
}

.cicle-2 {
  width: 200px;
  height: 200px;
  border-width: 10px;
  border-style: solid;
  border-top-color: #fea502;
  border-left-color: transparent;
  border-bottom-color: #00feff;
  border-left-color: transparent;
  animation: loagding 8s ease-in-out infinite alternate;
}

.cicle-3 {
  width: 100px;
  height: 100px;
  border-width: 10px;
  border-style: solid;
  border-top-color: #fcfd00;
  border-left-color: transparent;
  border-bottom-color: #2ccf2d;
  border-left-color: transparent;
  animation: loagding 16s ease-in-out infinite alternate;
}

@keyframes loagding {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(1440deg);
  }
}