<commit_before>//
// Siimple - minimal css framework for flat and clean websites
// Under the MIT LICENSE.
// License:    https://github.com/siimple/siimple/blob/master/LICENSE.md
// Repository: https://github.com/siimple
// Website:    http://siimple.juanes.xyz
//

//Spinner variables
$siimple-spinner-size: 10px;
$siimple-spinner-space: 15px;

//Spinner large variables
$siimple-spinner-large-size: 15px;
$siimple-spinner-large-space: 20px;

//Spinner small variables
$siimple-spinner-small-size: 8px;
$siimple-spinner-small-space: 13px;

//Spinner mixin
@mixin siimple-spinner
{
  //Spinner animation
  @keyframes siimple_spinner_animation { 0%, 80%, 100% { background-color: rgba(255, 255, 255, 0); } }

  //Spinner animation
  @keyframes siimple_spinner_animation { 40% { background-color: rgba(255, 255, 255, 0); } }

  @include siimple-spinner-base();

  display: block;

  text-indent: -9999em;
  font-size: 10px;

  position: relative;
  transform: translateZ(0);

  animation-delay: -0.2s;

  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;

  //Before spinner
  &:before
  {
    @include siimple-spinner-base();

    animation-delay: -0.4s;

    position: absolute;
    left: calc(#{$siimple-spinner-space} * -1);
    top: 0;
  }

  //After spinner
  &:after
  {
    @include siimple-spinner-base();

    position: absolute;
    left: $siimple-spinner-space;
    top: 0;
  }
}

//Base spinner mixin
@mixin siimple-spinner-base
{
  width: $siimple-spinner-size;
  height: $siimple-spinner-size;
  content: "";

  background-color: $siimple-grey-2;

  animation: siimple_spinner_animation 1.2s infinite ease-in-out;
  animation-fill-mode: both;

  border-radius: 100px;
}

//Colored spinner mixin
@mixin siimple-spinner-color($color)
{
  //Apply to base, after and before
  &, &:after, &:before
  {
    background-color: siimple-color($color, 2) !important;
  }
}

//Small spinner mixin
@mixin siimple-spinner-small()
{
  //Spinner small common styles
  &, &:before, &:after
  {
    width: $siimple-spinner-small-size !important;
    height: $siimple-spinner-small-size !important;
  }

  //Spinner small before
  &:before
  {
    left: calc(#{$siimple-spinner-small-space} * -1) !important;
  }

  //Spinner small after
  &:after
  {
    left: $siimple-spinner-small-space !important;
  }
}
<commit_msg>scss/elements/_spinner.scss: fixed bug with animation in firefox<commit_after>//
// Siimple - minimal css framework for flat and clean websites
// Under the MIT LICENSE.
// License:    https://github.com/siimple/siimple/blob/master/LICENSE.md
// Repository: https://github.com/siimple
// Website:    http://siimple.juanes.xyz
//

//Spinner variables
$siimple-spinner-size: 10px;
$siimple-spinner-space: 15px;

//Spinner large variables
$siimple-spinner-large-size: 15px;
$siimple-spinner-large-space: 20px;

//Spinner small variables
$siimple-spinner-small-size: 8px;
$siimple-spinner-small-space: 13px;

//Spinner mixin
@mixin siimple-spinner
{
  //Spinner animation
  @keyframes siimple_spinner_animation
  {
    50% { background-color: transparent; }
  }

  @include siimple-spinner-base();

  display: block;

  text-indent: -9999em;
  font-size: 10px;

  position: relative;
  transform: translateZ(0);

  animation-delay: -0.2s;

  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;

  //Before spinner
  &:before
  {
    @include siimple-spinner-base();

    animation-delay: -0.4s;

    position: absolute;
    left: calc(#{$siimple-spinner-space} * -1);
    top: 0;
  }

  //After spinner
  &:after
  {
    @include siimple-spinner-base();

    position: absolute;
    left: $siimple-spinner-space;
    top: 0;
  }
}

//Base spinner mixin
@mixin siimple-spinner-base
{
  width: $siimple-spinner-size;
  height: $siimple-spinner-size;
  content: "";
  //background-color: $siimple-grey-2;
  animation: siimple_spinner_animation 1s infinite ease-in-out;
  animation-fill-mode: both;
  border-radius: 100px;
}

//Colored spinner mixin
@mixin siimple-spinner-color($color)
{
  //Apply to base, after and before
  &, &:after, &:before
  {
    background-color: siimple-color($color, 2);
  }
}

//Small spinner mixin
@mixin siimple-spinner-small()
{
  //Spinner small common styles
  &, &:before, &:after
  {
    width: $siimple-spinner-small-size !important;
    height: $siimple-spinner-small-size !important;
  }

  //Spinner small before
  &:before
  {
    left: calc(#{$siimple-spinner-small-space} * -1) !important;
  }

  //Spinner small after
  &:after
  {
    left: $siimple-spinner-small-space !important;
  }
}

{'fraction_non_alphanumeric': 0.14890350877192982, 'fraction_numerical': 0.021271929824561404, 'mean_word_length': 3.3028301886792453, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, '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': '2945545', 'n_tokens_mistral': 1840, 'n_tokens_neox': 1658, 'n_words': 352}