<commit_before>@import "../../../styles/variables.scss";

$load-block-loader-color: #dde2e7;
$load-block-loader-highlight-color: #6b9dc8;
$load-block-loader-height: 30px;
$load-block-loader-segment-width: 15px;
$load-block-loader-spacing: 12px;
$load-block-period: 1000ms; //2000ms
$load-block-delay-1: 150ms;
$load-block-delay-2: 300ms;
$load-block-delay-3: 450ms;

@keyframes spinner-loader {
  0% {
    background: $load-block-loader-color;
  }
  10% {
    background: $load-block-loader-highlight-color;
  }
  40% {
    background: $load-block-loader-color;
  }
}

.load-block {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
  opacity: 1;


  &__paper {
    margin:auto;
    width: ($load-block-loader-segment-width*3 + $load-block-loader-spacing*2);
    background-color: transparent;
    height: $load-block-loader-height;
  }

  &__dots {
    background: $load-block-loader-color;
    display: inline-block;
    position: relative;
    text-indent: -9999px;

    //css circle
    width: $load-block-loader-segment-width;
    height: $load-block-loader-segment-width;
    border-radius: 50%;

    margin: 0 ($load-block-loader-segment-width + $load-block-loader-spacing);
    margin-top: ($load-block-loader-height - $load-block-loader-segment-width) / 2;

    animation: spinner-loader $load-block-period $load-block-delay-2 infinite ease-out;

    &:before, &:after {
      background: $load-block-loader-color;
      content: '\x200B';
      display: inline-block;

      width: $load-block-loader-segment-width;
      height: $load-block-loader-segment-width;
      border-radius: 50%;

      position: absolute;
      top: 0;
    }

    &:before {
      animation: spinner-loader $load-block-period $load-block-delay-1 infinite ease-out;
      left: -($load-block-loader-segment-width + $load-block-loader-spacing);
    }

    &:after {
      animation: spinner-loader $load-block-period $load-block-delay-3 infinite ease-out;
      right: -($load-block-loader-segment-width + $load-block-loader-spacing);
    }
  }
}

// enter/leave animations for 'spinner' base
.load-block-enter {
  opacity: 0.0;
}
.load-block-enter.load-block-enter-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.load-block-leave {
  opacity: 1;
}
.load-block-leave.spinner-leave-active {
  opacity: 0.0;
  transition: opacity .5s ease-in;
}<commit_msg>remove redundant scss rules<commit_after>@import "../../../styles/variables.scss";

$load-block-loader-color: #dde2e7;
$load-block-loader-highlight-color: #6b9dc8;
$load-block-loader-height: 30px;
$load-block-loader-segment-width: 15px;
$load-block-loader-spacing: 12px;
$load-block-period: 1000ms; //2000ms
$load-block-delay-1: 150ms;
$load-block-delay-2: 300ms;
$load-block-delay-3: 450ms;

@keyframes spinner-loader {
  0% {
    background: $load-block-loader-color;
  }
  10% {
    background: $load-block-loader-highlight-color;
  }
  40% {
    background: $load-block-loader-color;
  }
}

.load-block {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
  opacity: 1;


  &__paper {
    margin:auto;
    width: ($load-block-loader-segment-width*3 + $load-block-loader-spacing*2);
    background-color: transparent;
    height: $load-block-loader-height;
  }

  &__dots {
    background: $load-block-loader-color;
    display: inline-block;
    position: relative;
    text-indent: -9999px;

    //css circle
    width: $load-block-loader-segment-width;
    height: $load-block-loader-segment-width;
    border-radius: 50%;

    margin: 0 ($load-block-loader-segment-width + $load-block-loader-spacing);
    margin-top: ($load-block-loader-height - $load-block-loader-segment-width) / 2;

    animation: spinner-loader $load-block-period $load-block-delay-2 infinite ease-out;

    &:before, &:after {
      background: $load-block-loader-color;
      content: '\x200B';
      display: inline-block;

      width: $load-block-loader-segment-width;
      height: $load-block-loader-segment-width;
      border-radius: 50%;

      position: absolute;
      top: 0;
    }

    &:before {
      animation: spinner-loader $load-block-period $load-block-delay-1 infinite ease-out;
      left: -($load-block-loader-segment-width + $load-block-loader-spacing);
    }

    &:after {
      animation: spinner-loader $load-block-period $load-block-delay-3 infinite ease-out;
      right: -($load-block-loader-segment-width + $load-block-loader-spacing);
    }
  }
}
{'fraction_non_alphanumeric': 0.164, 'fraction_numerical': 0.029777777777777778, 'mean_word_length': 3.040394973070018, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6435341', 'n_tokens_mistral': 1719, 'n_tokens_neox': 1590, 'n_words': 280}