wix-style-react/dist/src/Loader/Loader.st.css

wix-style-react

/* st-namespace-reference="../../../src/Loader/Loader.st.css" */
:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: THEME-COLOR-00, R10, THEME-COLOR-30, D80;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-8, ease-9;
}

@keyframes rotation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes staggered-rotation {
  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.root {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  -st-states: size(enum(tiny, small, medium, large)), status(enum(success, error, loading)), color(enum(blue, white));
}

.statusIndicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.statusIndicator svg {
  height: 14px;
  width: 19px;
}

.root:size(tiny) .statusIndicator svg {
  height: 8px;
  width: 10px;
}
.root:size(small) .statusIndicator svg {
  height: 8px;
  width: 11px;
}

.arcsContainer {
  position: relative;
}

.darkArc {
  stroke: value(THEME-COLOR-00);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
}

.lightArc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
}

.text {
  margin-top: 18px;
  max-width: 150px;
  word-wrap: break-word;
  text-align: center;
}

.root:status(success) {
  color: value(THEME-COLOR-00);
}

.root:status(success):size(tiny) {
  color: value(D80);
}

.root:status(success):size(tiny) .darkArc {
  fill: value(THEME-COLOR-00);
}

.root:status(error) {
  color: value(R10);
}

.root:status(error) .darkArc {
  stroke: value(R10);
}

.root:status(error):size(tiny) {
  color: value(D80);
}

.root:status(error):size(tiny) .darkArc {
  fill: value(R10);
}

.root:status(loading):size(tiny) .arcsContainer .lightArc {
  animation: rotation 2s value(ease-9) infinite;
}

.root:status(loading):size(tiny) .arcsContainer .darkArc {
  animation: rotation 666ms value(ease-9) infinite;
}

.root:status(loading):size(small) .arcsContainer .lightArc {
  animation: rotation 2s value(ease-9) infinite;
}

.root:status(loading):size(small) .arcsContainer .darkArc {
  animation: rotation 0.5s value(ease-9) infinite;
}

.root:status(loading):size(medium) .arcsContainer {
  animation: rotation 2s value(ease-9) infinite;
}

.root:status(loading):size(medium) .arcsContainer .lightArc {
  animation: rotation 666ms value(ease-8) infinite;
}

.root:status(loading):size(large) .arcsContainer {
  animation: rotation 2s value(ease-9) infinite;
}

.root:status(loading):size(large) .arcsContainer .lightArc {
  animation: staggered-rotation 2s value(ease-8) infinite;
}

.root:color(blue) .lightArc {
  stroke: value(THEME-COLOR-30);
}

.root:color(white) .lightArc {
  stroke: value(D80);
}