@enact/sandstone/Spinner/Spinner.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

@keyframes spin {
  0% {
    transform: rotate(0.25turn);
  }
  33% {
    transform: rotate(0.5turn);
  }
  80% {
    transform: rotate(0.95turn);
  }
  85% {
    transform: rotate(1turn);
  }
  100% {
    transform: rotate(1.25turn);
  }
}
@keyframes rotate1 {
  0%,
  100% {
    transform: rotate(0turn);
  }
  33% {
    transform: rotate(0.125turn);
  }
}
@keyframes rotate2 {
  0%,
  100% {
    transform: rotate(0turn);
  }
  33% {
    transform: rotate(0.25turn);
  }
}
@keyframes rotate3 {
  0%,
  100% {
    transform: rotate(0turn);
  }
  33% {
    transform: rotate(0.375turn);
  }
}
@keyframes rotate4 {
  0%,
  100% {
    transform: rotate(0turn);
  }
  33% {
    transform: rotate(0.5turn);
  }
}
.spinner {
  line-height: 1.375rem;
  vertical-align: middle;
}
.spinner .bg {
  position: relative;
  border-radius: 20.8125rem;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  margin-left: auto;
  margin-right: auto;
}
.spinner .decorator {
  width: 2rem;
  height: 2rem;
  position: relative;
  background-size: cover;
  border-radius: 20.8125rem;
  overflow: hidden;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(transparent 0.85417rem, black 0.875rem);
  animation: none 1.25s linear infinite;
  animation-name: spin;
  animation-play-state: paused;
}
.spinner .decorator .fan1,
.spinner .decorator .fan2,
.spinner .decorator .fan3,
.spinner .decorator .fan4 {
  content: "";
  top: 0;
  right: 50%;
  bottom: 50%;
  left: 0;
  clip-path: polygon(100% 0, 0 3%, 100% 100%);
  transform-origin: bottom right;
}
.spinner .decorator .fan1,
.spinner .decorator .fan2,
.spinner .decorator .fan3,
.spinner .decorator .fan4,
.spinner .decorator .cap {
  position: absolute;
  animation: none 1.25s linear infinite;
  animation-name: rotate1;
  animation-play-state: paused;
  animation-fill-mode: both;
}
.spinner .decorator .fan2 {
  animation-name: rotate2;
}
.spinner .decorator .fan3 {
  animation-name: rotate3;
}
.spinner .decorator .fan4,
.spinner .decorator .cap {
  animation-name: rotate4;
}
.spinner .decorator .cap {
  top: 0;
  right: 0;
  bottom: 50%;
  left: 0;
  clip-path: circle(1px at 50% 1px);
  transform-origin: bottom;
}
.spinner .client {
  font-weight: normal;
  font-size: 1.25rem;
  font-style: normal;
  font-family: "Sandstone";
  line-height: 1.375rem;
  font-weight: bold;
  margin-top: 1rem;
  max-width: 14.5rem;
}
:global(.enact-locale-non-latin) .spinner .client {
  font-family: "Sandstone";
}
:global(.enact-locale-non-latin) .spinner .client {
  font-family: "Sandstone";
  font-weight: 300;
  font-size: 1.125rem;
  font-style: normal;
}
:global(.enact-locale-km) .spinner .client {
  line-height: 1.7em;
}
:global(.enact-locale-si) .spinner .client {
  line-height: 1.7em;
}
:global(.enact-locale-th) .spinner .client {
  line-height: 1.7em;
}
:global(.enact-locale-vi) .spinner .client {
  line-height: 1.7em;
}
.spinner .client a:link {
  color: inherit;
  text-decoration: none;
}
.spinner .client a:visited {
  color: inherit;
  text-decoration: none;
}
.spinner .client a:hover {
  color: inherit;
  text-decoration: none;
}
.spinner .client a:active {
  color: inherit;
  text-decoration: none;
}
.spinner.medium {
  /* Needed to prevent global class being added in the DOM */
}
.spinner.small .bg,
.spinner.small .decorator {
  width: 1rem;
  height: 1rem;
}
.spinner.small .bg {
  padding: 0.25rem;
}
.spinner.small .decorator {
  -webkit-mask-image: radial-gradient(transparent 0.35417rem, black 0.375rem);
}
.spinner.small .decorator .cap {
  clip-path: circle(1px at 50% 1px);
}
.spinner.small:global(.largeText) .bg,
.spinner.small:global(.largeText) .decorator {
  width: 1.75rem;
  height: 1.75rem;
}
.spinner.small:global(.largeText) .decorator {
  -webkit-mask-image: radial-gradient(transparent 0.72917rem, black 0.75rem);
}
.spinner.content {
  padding: 0.5rem;
}
.spinner.running .decorator,
.spinner.running .decorator .fan1,
.spinner.running .decorator .fan2,
.spinner.running .decorator .fan3,
.spinner.running .decorator .fan4,
.spinner.running .decorator .cap {
  animation-play-state: running;
}
.spinner:global(.neutral) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.spinner:global(.neutral) .bg {
  background-color: var(--sand-component-bg-color, #7d848c);
}
.spinner:global(.neutral) .decorator {
  background: radial-gradient(circle at 0% 0%, rgb(var(--sand-spinner-color, 255, 255, 255)) 20%, rgb(var(--sand-spinner-color, 255, 255, 255), 20%) 40%), radial-gradient(circle at 35% 8%, rgb(var(--sand-spinner-color, 255, 255, 255)) 15%, transparent 15%);
}
.spinner:global(.neutral) .decorator .fan1,
.spinner:global(.neutral) .decorator .fan2,
.spinner:global(.neutral) .decorator .fan3,
.spinner:global(.neutral) .decorator .fan4 {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
.spinner:global(.neutral) .decorator .cap {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
.spinner:global(.neutral).transparent .bg {
  background-color: transparent;
}
.spinner:global(.neutral) .client {
  text-shadow: 0 1px 1px rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .bg {
  background-color: var(--sand-component-bg-color, #7d848c);
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator {
  background: radial-gradient(circle at 0% 0%, rgb(var(--sand-spinner-color, 255, 255, 255)) 20%, rgb(var(--sand-spinner-color, 255, 255, 255), 20%) 40%), radial-gradient(circle at 35% 8%, rgb(var(--sand-spinner-color, 255, 255, 255)) 15%, transparent 15%);
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan1,
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan2,
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan3,
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan4 {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .cap {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast).transparent .bg {
  background-color: transparent;
}
:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .client {
  text-shadow: 0 1px 1px rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.spinner:global(.light) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.spinner:global(.light) .bg {
  background-color: var(--sand-component-bg-color, #7d848c);
}
.spinner:global(.light) .decorator {
  background: radial-gradient(circle at 0% 0%, rgb(var(--sand-spinner-color, 255, 255, 255)) 20%, rgb(var(--sand-spinner-color, 255, 255, 255), 20%) 40%), radial-gradient(circle at 35% 8%, rgb(var(--sand-spinner-color, 255, 255, 255)) 15%, transparent 15%);
}
.spinner:global(.light) .decorator .fan1,
.spinner:global(.light) .decorator .fan2,
.spinner:global(.light) .decorator .fan3,
.spinner:global(.light) .decorator .fan4 {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
.spinner:global(.light) .decorator .cap {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
.spinner:global(.light).transparent .bg {
  background-color: transparent;
}
.spinner:global(.light) .client {
  text-shadow: 0 1px 1px rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.spinner:global(.game) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.spinner:global(.game) .bg {
  background-color: var(--sand-component-bg-color, #2d224c);
}
.spinner:global(.game) .decorator {
  background: radial-gradient(circle at 0% 0%, rgb(var(--sand-spinner-color, 255, 255, 255)) 20%, rgb(var(--sand-spinner-color, 255, 255, 255), 20%) 40%), radial-gradient(circle at 35% 8%, rgb(var(--sand-spinner-color, 255, 255, 255)) 15%, transparent 15%);
}
.spinner:global(.game) .decorator .fan1,
.spinner:global(.game) .decorator .fan2,
.spinner:global(.game) .decorator .fan3,
.spinner:global(.game) .decorator .fan4 {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
.spinner:global(.game) .decorator .cap {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
.spinner:global(.game).transparent .bg {
  background-color: transparent;
}
.spinner:global(.game) .client {
  text-shadow: 0 1px 1px rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.green) .spinner:global(.game) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.green) .spinner:global(.game) .bg {
  background-color: var(--sand-component-bg-color, #1F2C24);
}
:global(.green) .spinner:global(.game) .decorator {
  background: radial-gradient(circle at 0% 0%, rgb(var(--sand-spinner-color, 255, 255, 255)) 20%, rgb(var(--sand-spinner-color, 255, 255, 255), 20%) 40%), radial-gradient(circle at 35% 8%, rgb(var(--sand-spinner-color, 255, 255, 255)) 15%, transparent 15%);
}
:global(.green) .spinner:global(.game) .decorator .fan1,
:global(.green) .spinner:global(.game) .decorator .fan2,
:global(.green) .spinner:global(.game) .decorator .fan3,
:global(.green) .spinner:global(.game) .decorator .fan4 {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
:global(.green) .spinner:global(.game) .decorator .cap {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
:global(.green) .spinner:global(.game).transparent .bg {
  background-color: transparent;
}
:global(.green) .spinner:global(.game) .client {
  text-shadow: 0 1px 1px rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.orange) .spinner:global(.game) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.orange) .spinner:global(.game) .bg {
  background-color: var(--sand-component-bg-color, #422923);
}
:global(.orange) .spinner:global(.game) .decorator {
  background: radial-gradient(circle at 0% 0%, rgb(var(--sand-spinner-color, 255, 255, 255)) 20%, rgb(var(--sand-spinner-color, 255, 255, 255), 20%) 40%), radial-gradient(circle at 35% 8%, rgb(var(--sand-spinner-color, 255, 255, 255)) 15%, transparent 15%);
}
:global(.orange) .spinner:global(.game) .decorator .fan1,
:global(.orange) .spinner:global(.game) .decorator .fan2,
:global(.orange) .spinner:global(.game) .decorator .fan3,
:global(.orange) .spinner:global(.game) .decorator .fan4 {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
:global(.orange) .spinner:global(.game) .decorator .cap {
  background-color: rgb(var(--sand-spinner-color, 255, 255, 255));
}
:global(.orange) .spinner:global(.game).transparent .bg {
  background-color: transparent;
}
:global(.orange) .spinner:global(.game) .client {
  text-shadow: 0 1px 1px rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.spinnerContainer:global(.neutral) .blockClickOn .scrim {
  background-color: rgba(0, 0, 0, 0.3);
}
:global(.enact-a11y-high-contrast) .spinnerContainer:global(.neutral):global(.highContrast) .blockClickOn .scrim {
  background-color: rgba(0, 0, 0, 0.3);
}
.spinnerContainer:global(.light) .blockClickOn .scrim {
  background-color: rgba(0, 0, 0, 0.3);
}
.spinnerContainer:global(.game) .blockClickOn .scrim {
  background-color: rgba(0, 0, 0, 0.3);
}
:global(.green) .spinnerContainer:global(.game) .blockClickOn .scrim {
  background-color: rgba(0, 0, 0, 0.3);
}
:global(.orange) .spinnerContainer:global(.game) .blockClickOn .scrim {
  background-color: rgba(0, 0, 0, 0.3);
}