Sass: How to create a 360 transform rotate class variation (from 0deg to 180deg)

This is how you can create a list of all the necessary css classes to rotate an html object with a class of loading-progress-[degree-rotation-from-0-180deg].

$i: 1;
@while $i <= 50 {

    $rotation: (180 * $i) / 50;
    $rotation_int: decimal-round($rotation);

    @keyframes loading-progress-#{$i}{
        0%{
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(#{$rotation_int}deg);
            transform: rotate(#{$rotation_int}deg);
        }
      }

    .progress .progress-bar--#{$i}{
        font-size: $rotation_int;
        animation: loading-progress-#{$i} 0.4s linear forwards 1.8s;
    }

  $i: $i + 1;
}

The decimal-round function helps us to convert a float or decimal number to integer

@function decimal-round ($number, $digits: 0, $mode: round) {
    $n: 1;
    // $number must be a number
    @if type-of($number) != number {
        @warn '#{ $number } is not a number.';
        @return $number;
    }
    // $digits must be a unitless number
    @if type-of($digits) != number {
        @warn '#{ $digits } is not a number.';
        @return $number;
    } @else if not unitless($digits) {
        @warn '#{ $digits } has a unit.';
        @return $number;
    }
    @if $digits > 0 {
        @for $i from 1 through $digits {
            $n: $n * 10;
        }
    }
    @if $mode == round {
        @return round($number * $n) / $n;
    } @else if $mode == ceil {
        @return ceil($number * $n) / $n;
    } @else if $mode == floor {
        @return floor($number * $n) / $n;
    } @else {
        @warn '#{ $mode } is undefined keyword.';
        @return $number;
    }
}