ldrs/dist/react/Hourglass.css

Minimalist loading animations for React and web components

.container_3c0354 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--uib-size);
  width: var(--uib-size);
}

.inner_2872d0 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  animation: rotate_f64a1b calc(var(--uib-speed) * 2) ease-in-out infinite;
}

.half_ce1369 {
  --uib-half-size: calc(var(--uib-size) * 0.435);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-half-size);
  height: var(--uib-half-size);
  overflow: hidden;
  isolation: isolate;
}
.half_ce1369:first-child {
  top: 8.25%;
  left: 8.25%;
  border-radius: 50% 50% calc(var(--uib-size) / 15);
}
.half_ce1369:last-child {
  bottom: 8.25%;
  right: 8.25%;
  transform: rotate(180deg);
  align-self: flex-end;
  border-radius: 50% 50% calc(var(--uib-size) / 15);
}
.half_ce1369:last-child::after {
  animation-delay: calc(var(--uib-speed) * -1);
}
.half_ce1369::before {
  content: "";
  height: 110%;
  width: 110%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--uib-color);
  opacity: var(--uib-bg-opacity);
  transition: background-color 0.3s ease;
}
.half_ce1369::after {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  background-color: var(--uib-color);
  height: 110%;
  width: 110%;
  transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
  transform-origin: bottom right;
  border-radius: 0 0 calc(var(--uib-size) / 20) 0;
  animation: flow_017d88 calc(var(--uib-speed) * 2) linear infinite both;
  transition: background-color 0.3s ease;
}

@keyframes flow_017d88 {
  0% {
    transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
  }
  30% {
    transform: rotate(45deg) translate(115%, 50%) scaleX(1.2);
  }
  30.001%, 50% {
    transform: rotate(0deg) translate(-85%, -85%) scaleX(1);
  }
  80%, 100% {
    transform: rotate(0deg) translate(0%, 0%) scaleX(1);
  }
}
@keyframes rotate_f64a1b {
  0%, 30% {
    transform: rotate(45deg);
  }
  50%, 80% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}