@blueprintjs/core/src/components/spinner/_spinner.scss

// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../../common/variables";

/*
Spinners

Spinners indicate indeterminate progress.

Styleguide components.progress.spinner
*/

/*
CSS API

You can create spinners manually by inserting their whole markup into your HTML.
Spinners created via markup use same modifier classes as the [React `Spinner` component](#components.progress.spinner.js).

Markup:
<div class="pt-spinner {{.modifier}}">
  <div class="pt-spinner-svg-container">
    <svg viewBox="0 0 100 100">
      <path class="pt-spinner-track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>
      <path class="pt-spinner-head" d="M 94.5 50 A 44.5 44.5 0 0 0 50 5.5"></path>
    </svg>
  </div>
</div>

.pt-small - Small spinner
.pt-large - Large spinner

Styleguide components.progress.spinner.css
*/

/*
JavaScript API

The `Spinner` component is available in the __@blueprintjs/core__ package.
Make sure to review the [general usage docs for JS components](#components.usage).

A `Spinner` is a simple stateless component that renders HTML/SVG markup.
It supports a `value` prop between 0 and 1 that determines how much of the track is filled by the head.
When this prop is defined, the spinner head will not spin but it will smoothly animate as `value` updates.
Omitting `value` will result in an "indeterminate" spinner where the head spins indefinitely
(this is the default appearance).

Note that the CSS modifiers described in the [CSS API](#components.progress.spinner.css)
are supported via the `className` prop.

<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
  <h5>IE11 compatibility note</h5>
  IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known `value` will not smoothly
  transition as `value` changes. Indeterminate spinners still animate correctly because they rely on CSS animations, not
  transitions.
</div>

@interface ISpinnerProps

@react-example SpinnerExample

[msdn-css-svg]: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstransitionsforsvgelements/?q=svg

Styleguide components.progress.spinner.js
*/

/*
SVG spinner

Use the `SVGSpinner` component to render a spinner inside an SVG element.

<div class="pt-callout pt-intent-primary pt-icon-info-sign">
  <h5>Sizing note</h5>
  Because of the way SVG elements are sized, you may need to manually scale the spinner inside your SVG
  to make it an appropriate size.
</div>

Styleguide components.progress.spinner.js.svg
*/

@mixin spinner-size($width-factor, $stroke-width, $speed) {
  &:not(.pt-svg-spinner) {
    width: $spinner-width * $width-factor;

    .pt-spinner-svg-container {
      animation-duration: $speed;
    }
  }

  &.pt-svg-spinner {
    animation-duration: $speed;
  }

  .pt-svg-spinner-transform-group {
    transform: scale($width-factor);
  }

  path {
    stroke-width: $stroke-width;
  }
}

$spinner-track-color: rgba($gray1, 0.2);
$spinner-head-color: rgba($gray1, 0.8);
$dark-spinner-track-color: rgba($gray5, 0.2);
$dark-spinner-head-color: $gray1;

$spinner-width: $pt-grid-size * 10;
$spinner-width-factor: 0.5;
$spinner-width-factor-small: 0.24;
$spinner-width-factor-large: 1;
$spinner-stroke-width: 5;
$spinner-stroke-width-small: 12;
$spinner-stroke-width-large: 3;

$spinner-speed: $pt-transition-duration * 4;
$spinner-speed-small: $pt-transition-duration * 4;
$spinner-speed-large: $pt-transition-duration * 4.5;

// the relative path from blueprint.css to resources in the distribution package
$resources-path: "./resources";

// see https://css-tricks.com/scale-svg/
// how to Scale SVG to Fit the Available Width (and adjust the height to match) Option 4

.pt-spinner {
  @include spinner-size($spinner-width-factor, $spinner-stroke-width, $spinner-speed);

  path {
    fill-opacity: 0;
  }

  .pt-spinner-head {
    transition: stroke-dashoffset ($pt-transition-duration * 2) $pt-transition-ease;
    stroke: $spinner-head-color;
    stroke-linecap: round;
  }

  .pt-spinner-track {
    stroke: $spinner-track-color;
  }

  &.pt-small {
    @include spinner-size($spinner-width-factor-small, $spinner-stroke-width-small, $spinner-speed-small);
  }

  &.pt-large {
    @include spinner-size($spinner-width-factor-large, $spinner-stroke-width-large, $spinner-speed-large);
  }
}

.pt-spinner:not(.pt-svg-spinner) {
  display: inline-block;

  .pt-spinner-svg-container {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0;
    padding-bottom: 100%;
    animation: pt-spinner-animation $spinner-speed linear infinite;
  }

  &.pt-no-spin .pt-spinner-svg-container {
    animation: none;
  }

  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.pt-svg-spinner {
  transform-origin: center;
  animation: pt-spinner-animation $spinner-speed linear infinite;

  &.pt-no-spin {
    animation: none;
  }
}

.pt-svg-spinner-transform-group {
  transform-origin: center;
}

.pt-dark .pt-spinner {
  .pt-spinner-head {
    stroke: $dark-spinner-head-color;
  }

  .pt-spinner-track {
    stroke: $dark-spinner-track-color;
  }
}

@each $intent, $color in $pt-intent-colors {
  .pt-spinner.pt-intent-#{$intent} .pt-spinner-head {
    stroke: $color;
  }
}

@keyframes pt-spinner-animation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}