.loader-chrome {
  --red: #dd5144;
  --blue: #4285f4;
  --yellow: #ffcd46;
  --white: #e9e9e9;
  --green: #1da462;
  position: relative;
  zoom: 0.7;
  width: 250px;
  height: 250px;
  background-color: var(--red);
  border-radius: 50%;
  overflow: hidden;
  animation: animacion 5s linear infinite;

  .circle-blue-center {
    width: 130px;
    height: 130px;
    background-color: var(--blue);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    border: 13px solid var(--white);
    z-index: 3;
  }

  .yellow-right {
    position: absolute;
    background-color: var(--yellow);
    width: 100%;
    height: 100%;
    top: 38%;
    left: 54%;
    transform: skewX(-30deg);
    z-index: 2;

    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: -34px;
      left: 20%;
      background-color: inherit;
      transform: skewX(50deg);
      z-index: 2;
    }
  }

  .green-left {
    position: absolute;
    left: -154px;
    top: 69px;
    background-color: var(--green);
    width: 100%;
    height: 100%;
    transform: skewX(35deg);
    z-index: 1;

    &::before {
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      height: 100%;
      z-index: 1;
      top: 94px;
      left: 68px;
      background-color: inherit;
      transform: skewX(0deg);
    }
  }
}

@keyframes animacion {
  0%,
  10% {
    transform: scale(0.8) translateX(-600px);
    opacity: 0;
  }

  25%,
  50%,
  75% {
    transform: scale(0.8) translateX(0) rotate(720deg);
    opacity: 1;
  }

  90%,
  100% {
    transform: scale(0.8) translateX(600px);
    opacity: 0;
  }
}