sogo/UI/WebServerResources/scss/components/progressCircular/progressCircular.scss

$progress-circular-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1) !default;
$progress-circular-duration : 5.25s !default;
$progress-circular-circle-duration : $progress-circular-duration * 0.25 !default;
$progress-circular-outer-duration : $progress-circular-duration * (5 / 9) !default;
$progress-circular-sporadic-duration : $progress-circular-duration !default;
$progress-circular-size : 50px !default;

@keyframes outer-rotate {
  100% { transform: rotate(360deg); }
}
@keyframes left-wobble {
  0%, 100% { transform: rotate(130deg); }
  50% { transform: rotate( -5deg); }
}
@keyframes right-wobble {
  0%, 100% { transform: rotate(-130deg); }
  50% { transform: rotate(   5deg); }
}
@keyframes 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); }
}

md-progress-circular {
  width: $progress-circular-size;
  height: $progress-circular-size;
  display: block;
  position: relative;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  .md-inner {
    width: $progress-circular-size;
    height: $progress-circular-size;
    position: relative;
    .md-gap {
      position: absolute;
      left: $progress-circular-size * 0.5 - 1;
      right: $progress-circular-size * 0.5 - 1;
      top: 0;
      bottom: 0;
      border-top: 5px solid black;
      box-sizing: border-box;
    }
    .md-left, .md-right {
      position: absolute;
      top: 0;
      height: $progress-circular-size;
      width: $progress-circular-size * 0.5;
      overflow: hidden;
      .md-half-circle {
        position: absolute;
        top: 0;
        width: $progress-circular-size;
        height: $progress-circular-size;
        box-sizing: border-box;
        border-width: 5px;
        border-style: solid;
        border-color: black black transparent;
        border-radius: 50%;
      }
    }
    .md-left {
      left: 0;
      .md-half-circle {
        left: 0;
        border-right-color: transparent;
      }
    }
    .md-right {
      right: 0;
      .md-half-circle {
        right: 0;
        border-left-color: transparent;
      }
    }
  }

  $i: 0;
  @while $i <= 100 {
    &[value="#{$i}"] {
      .md-inner {
        .md-left {
          .md-half-circle {
            @if $i <= 50 {
              transform: rotate(135deg);
            } @else {
              transition: transform 0.1s linear;
              $deg: ($i - 50) / 50 * 180 + 135;
              transform: rotate(#{$deg}deg);
            }
          }
        }
        .md-right {
          .md-half-circle {
            @if $i <= 50 {
              transition: transform 0.1s linear;
              $deg: $i / 50 * 180 - 135;
              transform: rotate(#{$deg}deg);
            } @else {
              transform: rotate(45deg);
            }
          }
        }
        .md-gap {
          border-bottom-width: 5px;
          border-bottom-style: solid;
          @if $i <= 50 {
            border-bottom-color: transparent !important;
          } @else {
            transition: border-bottom-color 0.1s linear;
          }
        }
      }
    }
    $i: $i + 1;
  }

  &:not([md-mode=indeterminate]) {
    .md-inner {
      .md-left, .md-right {
        .md-half-circle {
        }
      }
    }
  }

  &[md-mode=indeterminate] {
    .md-spinner-wrapper {
      animation: outer-rotate $progress-circular-outer-duration linear infinite;
      .md-inner {
        animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
        .md-left, .md-right {
          .md-half-circle {
            animation-iteration-count: infinite;
            animation-duration: ($progress-circular-duration * 0.25);
            animation-timing-function: $progress-circular-ease-in-out;
          }
        }
        .md-left {
          .md-half-circle {
            animation-name: left-wobble;
          }
        }
        .md-right {
          .md-half-circle {
            animation-name: right-wobble;
          }
        }
      }
    }
  }
}