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

Angular 2 Material progress-circle

/* Animation Durations */
/** Component sizing */
: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: 100px;
  width: 100px;
  /** 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.
  */ }
  :host svg {
    height: 100%;
    width: 100%;
    transform-origin: center; }
  :host path {
    fill: transparent;
    stroke: #00897b;
    /** Stroke width of 10px defines stroke as 10% of the viewBox */
    stroke-width: 10px; }
  :host[color='accent'] path {
    stroke: #8e24aa; }
  :host[color='warn'] path {
    stroke: #e53935; }
  :host[mode='indeterminate'] {
    animation-duration: 5250ms, 2887.5ms;
    animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate;
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), 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); } }

/*# sourceMappingURL=progress-circle.css.map */