@zenithui/toast/dist/components/toast-asset/toast-asset.css

A modern, lightweight toast notification system for React applications. ZenithUI Toast provides a simple and customizable way to display notifications, alerts, and messages to users with smooth animations and flexible styling options.

.zenithui-loading-wrapper {
  --size: 16px;
  height: var(--size);
  width: var(--size);
  z-index: 10;
  position: absolute;
  inset: 0;
}

.zenithui-loading-wrapper[data-visible="false"] {
  transform-origin: center;
  animation: .2s forwards zenithui-fade-out;
}

.zenithui-spinner {
  height: var(--size);
  width: var(--size);
  position: relative;
  top: 50%;
  left: 50%;
}

.zenithui-loading-bar {
  background: var(--zenithui-loader-bg);
  border-radius: 6px;
  width: 24%;
  height: 8%;
  animation: 1.2s linear infinite zenithui-spin;
  position: absolute;
  top: -3.9%;
  left: -10%;
}

.zenithui-loading-bar:first-child {
  animation-delay: -1.2s;
  transform: rotate(.0001deg)translate(146%);
}

.zenithui-loading-bar:nth-child(2) {
  animation-delay: -1.1s;
  transform: rotate(30deg)translate(146%);
}

.zenithui-loading-bar:nth-child(3) {
  animation-delay: -1s;
  transform: rotate(60deg)translate(146%);
}

.zenithui-loading-bar:nth-child(4) {
  animation-delay: -.9s;
  transform: rotate(90deg)translate(146%);
}

.zenithui-loading-bar:nth-child(5) {
  animation-delay: -.8s;
  transform: rotate(120deg)translate(146%);
}

.zenithui-loading-bar:nth-child(6) {
  animation-delay: -.7s;
  transform: rotate(150deg)translate(146%);
}

.zenithui-loading-bar:nth-child(7) {
  animation-delay: -.6s;
  transform: rotate(180deg)translate(146%);
}

.zenithui-loading-bar:nth-child(8) {
  animation-delay: -.5s;
  transform: rotate(210deg)translate(146%);
}

.zenithui-loading-bar:nth-child(9) {
  animation-delay: -.4s;
  transform: rotate(240deg)translate(146%);
}

.zenithui-loading-bar:nth-child(10) {
  animation-delay: -.3s;
  transform: rotate(270deg)translate(146%);
}

.zenithui-loading-bar:nth-child(11) {
  animation-delay: -.2s;
  transform: rotate(300deg)translate(146%);
}

.zenithui-loading-bar:nth-child(12) {
  animation-delay: -.1s;
  transform: rotate(330deg)translate(146%);
}

@keyframes zenithui-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

@keyframes zenithui-spin {
  0% {
    opacity: 1;
  }

  100% {
    opacity: .15;
  }
}

@media (prefers-reduced-motion) {
  [data-zenithui-toast], [data-zenithui-toast] > *, .zenithui-loading-bar {
    transition: none !important;
    animation: none !important;
  }
}

.zenithui-loader {
  transform-origin: center;
  transition: opacity .2s, transform .2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zenithui-loader[data-visible="false"] {
  opacity: 0;
  transform: scale(.8)translate(-50%, -50%);
}