Sha256: c7f8287175c282a8b21a02d30657e117481234c752c0c940318e366824315f8f

Contents?: true

Size: 1.94 KB

Versions: 47

Compression:

Stored size: 1.94 KB

Contents

// Table of Contents
// ==================================================
// Keyframes
// Spinner
// Backdrop

// Keyframes
// ==================================================
@-webkit-keyframes spinner-colors {
  0% { stroke: color(primary); }
  34% { stroke: color(secondary); }
  67% { stroke: color(tertiary); }
  100% { stroke: color(quaditiary); }
}
@keyframes spinner-colors {
  0% { stroke: color(primary); }
  34% { stroke: color(secondary); }
  67% { stroke: color(tertiary); }
  100% { stroke: color(quaditiary); }
}
@-webkit-keyframes spinner-dash {
  0% { stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: (187 / 4);
    @include transform(rotate(135deg));
  }
  100% {
    stroke-dashoffset: 187;
    @include transform(rotate(450deg));
  }
}
@keyframes spinner-dash {
  0% { stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: (187 / 4);
    @include transform(rotate(135deg));
  }
  100% {
    stroke-dashoffset: 187;
    @include transform(rotate(450deg));
  }
}
@-webkit-keyframes spinner-rotator {
  0% { @include transform(rotate(0deg)); }
  100% { @include transform(rotate(270deg)); }
}
@keyframes spinner-rotator {
  0% { @include transform(rotate(0deg)); }
  100% { @include transform(rotate(270deg)); }
}

// Spinner
// ==================================================
.spinner {
  @include animation(spinner-rotator 1.4s linear infinite);
  bottom: 0;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2050;

  .bar {
    @include animation(spinner-dash 1.4s ease-in-out infinite, spinner-colors (1.4s * 4) ease-in-out infinite);
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
  }
}

// Backdrop
// ==================================================
.spinner-backdrop {
  background: transparentize(color(white), 0.05);
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2040;

  &.dark { background: transparentize(color(black), 0.05); }
}

Version data entries

47 entries across 47 versions & 1 rubygems

Version Path
active_frontend-14.0.63 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.62 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.61 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.60 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.59 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.58 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.57 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.56 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.55 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.54 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.53 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.52 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.51 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.50 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.49 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.48 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.47 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.46 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.45 vendor/assets/stylesheets/components/_spinner.scss
active_frontend-14.0.44 vendor/assets/stylesheets/components/_spinner.scss