<commit_before>/*
 *  Usage:
 *
 *    <div class="sk-wandering-cubes">
 *      <div class="sk-cube sk-cube1"></div>
 *      <div class="sk-cube sk-cube2"></div>
 *    </div>
 *
 */
@import "../variables";

.sk-wandering-cubes {
  $cubeDistance: 30px;

  margin: $spinkit-spinner-margin;
  width: 40px;
  height: 40px;
  position: relative;

  .sk-cube {
    background-color: $spinkit-spinner-color;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
  }

  .sk-cube2 {
    animation-delay: -0.9s;
  }
}

@keyframes sk-wanderingCubeMove {
  25% {
    transform: translateX($cubeDistance) rotate(-90deg) scale(0.5);
  } 50% {
    /* Hack to make FF rotate in the right direction */
    transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-179deg);
  } 50.1% {
    transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-180deg);
  } 75% {
    transform: translateX(0) translateY($cubeDistance) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
  }
}<commit_msg>Use a variable to set animation duration and related delay<commit_after>/*
 *  Usage:
 *
 *    <div class="sk-wandering-cubes">
 *      <div class="sk-cube sk-cube1"></div>
 *      <div class="sk-cube sk-cube2"></div>
 *    </div>
 *
 */
@import "../variables";

.sk-wandering-cubes {
  $animationDuration: 1.8s;

  margin: $spinkit-spinner-margin;
  width: 40px;
  height: 40px;
  position: relative;

  .sk-cube {
    background-color: $spinkit-spinner-color;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-wanderingCubeMove $animationDuration infinite ease-in-out;
  }

  .sk-cube2 {
    animation-delay: - $animationDuration / 2;
  }
}

@keyframes sk-wanderingCubeMove {
  $cubeDistance: 30px;

  25% {
    transform: translateX($cubeDistance) rotate(-90deg) scale(0.5);
  } 50% {
    /* Hack to make FF rotate in the right direction */
    transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-179deg);
  } 50.1% {
    transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-180deg);
  } 75% {
    transform: translateX(0) translateY($cubeDistance) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
  }
}
{'fraction_non_alphanumeric': 0.15771379458530296, 'fraction_numerical': 0.04254404813064031, 'mean_word_length': 3.217391304347826, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, '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': '1064745', 'n_tokens_mistral': 941, 'n_tokens_neox': 845, 'n_words': 172}