$progress-circle-size:48px;
$progress-circle-inset-size:36px;
$progress-circle-transition-length:.3s;

md-progress-circular {
  display: block;
  width: $progress-circle-size + 6;
  height: $progress-circle-size + 6;
  border-radius: 50%;
  padding: 3px;

  .md-wrapper1, .md-wrapper2 {
    width: $progress-circle-size;
    height: $progress-circle-size;
    position: absolute;
    border-radius: 50%;
  }

  .md-circle {
    .md-mask, .md-fill, .md-shadow {
      width: $progress-circle-size;
      height: $progress-circle-size;
      position: absolute;
      border-radius: 50%;
    }

    .md-shadow { }

    .md-mask, .md-fill {
      backface-visibility: hidden;
      transition: transform $progress-circle-transition-length;
    }

    .md-mask {
      clip: rect(0px, $progress-circle-size, $progress-circle-size, $progress-circle-size/2);
      .md-fill {
        clip: rect(0px, $progress-circle-size/2, $progress-circle-size, 0px);
      }
    }
  }

  .md-inset {
    width: $progress-circle-inset-size;
    height: $progress-circle-inset-size;
    position: absolute;
    margin-left: ($progress-circle-size - $progress-circle-inset-size)/2;
    margin-top: ($progress-circle-size - $progress-circle-inset-size)/2;
    border-radius: 50%;
  }

  &[md-mode=indeterminate] {
    .md-wrapper1, .md-wrapper2 {
      transform-origin: 50% 50%;
    }

    .md-wrapper1{
      animation: indeterminate_rotate1 3s infinite linear;
    }

    .md-wrapper2{
      animation: indeterminate_rotate2 1.5s infinite linear;
    }

    .md-fill, .md-mask.md-full{
      animation: indeterminate_size_fill 1.5s infinite linear;
    }

    .md-fill.md-fix {
      animation: indeterminate_size_fix 1.5s infinite linear;
    }
  }
}

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

@keyframes indeterminate_rotate2 {
  0%{
    transform: rotate(0deg);
  }
  70%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes indeterminate_size_fill {
  0%{
    transform: rotate(5deg);
  }
  10%{
    transform: rotate(5deg);
  }
  50%{
    transform: rotate(135deg);
  }
  70%{
    transform: rotate(135deg);
  }
  100%{
    transform: rotate(5deg);
  }
}

@keyframes indeterminate_size_fix {
  0%{
    transform: rotate(10deg);
  }
  10%{
    transform: rotate(10deg);
  }
  50%{
    transform: rotate(270deg);
  }
  70%{
    transform: rotate(270deg);
  }
  100%{
    transform: rotate(10deg);
  }
}
