@limetech/lime-elements/dist/collection/components/spinner/spinner.css

Lime Elements

/*
* This file is imported into every component!
*
* Nothing in this file may output any CSS
* without being explicitly called by outside code.
*/
/**
 * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-lime-green`.
 * @prop --spinner-color-2: 2nd animated stroke color, defaults to `--lime-brand-color-ocean-teal`.
 * @prop --spinner-color-3: 3rd animated stroke color, defaults to `--lime-brand-color-aqua`.
 * @prop --spinner-color-4: 4th animated stroke color, defaults to `--lime-brand-color-bubble-gum`.
 * @prop --spinner-color-5: 5th animated stroke color, defaults to `--lime-brand-color-sunny-orange`.
 * @prop --spinner-color-6: 6th animated stroke color, defaults to `--lime-brand-color-lime-green`.
 * @prop --spinner-color-7: 7th animated stroke color, defaults to `--lime-brand-color-ocean-teal`.
 * @prop --spinner-color-8: 8th animated stroke color, defaults to `--lime-brand-color-aqua`.
 * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-bubble-gum`.
 * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-sunny-orange`.
 */
:host(limel-spinner) {
  display: block;
}

@keyframes spin {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
@keyframes fade-in-the-spinner {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes animate-colored-circles {
  5% {
    stroke-dashoffset: 0;
  }
  10%, 100% {
    stroke-dashoffset: 63;
  }
}
:host([hidden]) {
  display: none;
}

:host {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  transform: translate3d(0, 0, 0);
  animation: fade-in-the-spinner 0.5s ease forwards;
}

:host([size=x-small]) {
  height: 2rem;
  width: 2rem;
}

:host([size=small]) {
  height: 2.125rem;
  width: 2.125rem;
}

:host([size=medium]) {
  height: 2.75rem;
  width: 2.75rem;
}

:host([size=large]) {
  height: 4rem;
  width: 4rem;
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

.color {
  animation: animate-colored-circles 10s linear infinite;
  fill: none;
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
  stroke-linecap: round;
  stroke-width: 4;
}
.color.thick {
  stroke-width: 10;
}
.color:nth-child(1) {
  stroke: var(--spinner-color-1, rgb(var(--lime-brand-color-lime-green)));
}
.color:nth-child(2) {
  stroke: var(--spinner-color-2, rgb(var(--lime-brand-color-ocean-teal)));
  animation-delay: 1s;
}
.color:nth-child(3) {
  stroke: var(--spinner-color-3, rgb(var(--lime-brand-color-aqua)));
  animation-delay: 2s;
}
.color:nth-child(4) {
  stroke: var(--spinner-color-4, rgb(var(--lime-brand-color-bubble-gum)));
  animation-delay: 3s;
}
.color:nth-child(5) {
  stroke: var(--spinner-color-5, rgb(var(--lime-brand-color-sunny-orange)));
  animation-delay: 4s;
}
.color:nth-child(6) {
  stroke: var(--spinner-color-6, rgb(var(--lime-brand-color-lime-green)));
  animation-delay: 5s;
}
.color:nth-child(7) {
  stroke: var(--spinner-color-7, rgb(var(--lime-brand-color-ocean-teal)));
  animation-delay: 6s;
}
.color:nth-child(8) {
  stroke: var(--spinner-color-8, rgb(var(--lime-brand-color-aqua)));
  animation-delay: 7s;
}
.color:nth-child(9) {
  stroke: var(--spinner-color-9, rgb(var(--lime-brand-color-bubble-gum)));
  animation-delay: 8s;
}
.color:nth-child(10) {
  stroke: var(--spinner-color-10, rgb(var(--contrast-700)));
  animation-delay: 9s;
}

.outline {
  stroke: rgba(var(--lime-brand-color-light-grey), 0.3);
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}
.outline.thick {
  stroke-width: 10;
}