@angular2-material/progress-circle/progress-circle.scss

@import 'variables';

@import 'default-theme';

/* Animation Durations */
$md-progress-circle-duration: 5250ms !default;
$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;
$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;

/** Component sizing */
$md-progress-circle-stroke-width: 10px !default;
// Height and weight of the viewport for md-progress-circle.
$md-progress-circle-viewport-size: 100px !default;


:host {
  display: block;
  /** Height and width are provided for md-progress-circle to act as a default.
      The height and width are expected to be overwritten by application css. */
  height: $md-progress-circle-viewport-size;
  width: $md-progress-circle-viewport-size;

  /** SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
      based on a 100px by 100px box.  Additionally all SVG sizes and locations are in reference to
      this viewBox.
  */
  svg {
    height: 100%;
    width: 100%;
    transform-origin: center;
  }


  path {
    fill: transparent;
    stroke: md-color($md-primary, 600);
    /** Stroke width of 10px defines stroke as 10% of the viewBox */
    stroke-width: $md-progress-circle-stroke-width;
  }

  &[color='accent'] path {
    stroke: md-color($md-accent, 600);
  }


  &[color='warn'] path {
    stroke: md-color($md-warn, 600);
  }


  &[mode='indeterminate'] {
    animation-duration: $md-progress-circle-sporadic-rotate-duration,
                        $md-progress-circle-constant-rotate-duration;
    animation-name: md-progress-circle-sporadic-rotate,
                    md-progress-circle-linear-rotate;
    animation-timing-function: $ease-in-out-curve-function,
                               linear;
    animation-iteration-count: infinite;
    transition: none;
  }
}


/** Animations for indeterminate mode */
@keyframes md-progress-circle-linear-rotate {
  0%       { transform: rotate(0deg); }
  100%     { transform: rotate(360deg); }
}
@keyframes md-progress-circle-sporadic-rotate {
  12.5%    { transform: rotate( 135deg); }
  25%      { transform: rotate( 270deg); }
  37.5%    { transform: rotate( 405deg); }
  50%      { transform: rotate( 540deg); }
  62.5%    { transform: rotate( 675deg); }
  75%      { transform: rotate( 810deg); }
  87.5%    { transform: rotate( 945deg); }
  100%     { transform: rotate(1080deg); }
}