@material/linear-progress/_keyframes.scss

//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
@use '@material/theme/theme';
@use '@material/theme/custom-properties';

@mixin primary-indeterminate-translate-keyframes_ {
  @keyframes mdc-linear-progress-primary-indeterminate-translate {
    0% {
      transform: translateX(0);
    }

    20% {
      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
      transform: translateX(0);
    }

    59.15% {
      animation-timing-function: cubic-bezier(
        0.302435,
        0.381352,
        0.55,
        0.956352
      );

      $primary-half: custom-properties.create(
        --mdc-linear-progress-primary-half,
        83.67142%
      );
      @include apply-translate_($primary-half);
    }

    100% {
      $primary-full: custom-properties.create(
        --mdc-linear-progress-primary-full,
        200.611057%
      );
      @include apply-translate_($primary-full);
    }
  }
}

@mixin primary-indeterminate-scale-keyframes_ {
  @keyframes mdc-linear-progress-primary-indeterminate-scale {
    0% {
      transform: scaleX(0.08);
    }

    36.65% {
      animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
      transform: scaleX(0.08);
    }

    69.15% {
      animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
      transform: scaleX(0.661479);
    }

    100% {
      transform: scaleX(0.08);
    }
  }
}

@mixin secondary-indeterminate-translate-keyframes_ {
  @keyframes mdc-linear-progress-secondary-indeterminate-translate {
    0% {
      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
      transform: translateX(0);
    }

    25% {
      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
      $secondary-quarter: custom-properties.create(
        --mdc-linear-progress-secondary-quarter,
        37.651913%
      );
      @include apply-translate_($secondary-quarter);
    }

    48.35% {
      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
      $secondary-half: custom-properties.create(
        --mdc-linear-progress-secondary-half,
        84.386165%
      );
      @include apply-translate_($secondary-half);
    }

    100% {
      $secondary-full: custom-properties.create(
        --mdc-linear-progress-secondary-full,
        160.277782%
      );
      @include apply-translate_($secondary-full);
    }
  }
}

@mixin secondary-indeterminate-scale-keyframes_ {
  @keyframes mdc-linear-progress-secondary-indeterminate-scale {
    0% {
      animation-timing-function: cubic-bezier(
        0.205028,
        0.057051,
        0.57661,
        0.453971
      );
      transform: scaleX(0.08);
    }

    19.15% {
      animation-timing-function: cubic-bezier(
        0.152313,
        0.196432,
        0.648374,
        1.004315
      );
      transform: scaleX(0.457104);
    }

    44.15% {
      animation-timing-function: cubic-bezier(
        0.257759,
        -0.003163,
        0.211762,
        1.38179
      );
      transform: scaleX(0.72796);
    }

    100% {
      transform: scaleX(0.08);
    }
  }
}

@mixin buffering-keyframes_ {
  @keyframes mdc-linear-progress-buffering {
    from {
      // Normally the buffer dots start from the left and overflow to the right.
      // We rotate by 180deg so that the buffer dots start on the right when
      // in non-reversed mode and overflow to the left.
      transform: rotate(180deg) translateX(-10px);
    }
  }
}

@mixin primary-indeterminate-translate-reverse-keyframes_ {
  @keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
    0% {
      transform: translateX(0);
    }

    20% {
      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
      transform: translateX(0);
    }

    59.15% {
      animation-timing-function: cubic-bezier(
        0.302435,
        0.381352,
        0.55,
        0.956352
      );
      $primary-half: custom-properties.create(
        --mdc-linear-progress-primary-half-neg,
        -83.67142%
      );
      @include apply-translate_($primary-half);
    }

    100% {
      $primary-full: custom-properties.create(
        --mdc-linear-progress-primary-full-neg,
        -200.611057%
      );
      @include apply-translate_($primary-full);
    }
  }
}

@mixin secondary-indeterminate-translate-reverse-keyframes_ {
  @keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
    0% {
      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
      transform: translateX(0);
    }

    25% {
      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
      $secondary-quarter: custom-properties.create(
        --mdc-linear-progress-secondary-quarter-neg,
        -37.651913%
      );
      @include apply-translate_($secondary-quarter);
    }

    48.35% {
      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
      $secondary-half: custom-properties.create(
        --mdc-linear-progress-secondary-half-neg,
        -84.386165%
      );
      @include apply-translate_($secondary-half);
    }

    100% {
      $secondary-full: custom-properties.create(
        --mdc-linear-progress-secondary-full-neg,
        -160.277782%
      );
      @include apply-translate_($secondary-full);
    }
  }
}

@mixin buffering-reverse-keyframes_ {
  @keyframes mdc-linear-progress-buffering-reverse {
    from {
      transform: translateX(-10px);
    }
  }
}

@mixin apply-translate_($value) {
  @include theme.property(
    transform,
    translateX(value),
    $replace: (value: $value)
  );
}