CSS3 animations spinners

css3-animations-spinners.markdown

CSS3 animations spinners

CSS3 animations spinners

A Pen by fox_hover on CodePen.

License.

index.html

<div class="container">
  <h1>CSS3 animated spinners vol.1</h1>
  <a href="#" title="Check on github">>> Check on github - https://github.com/eisenfox/css-spinners</a>
  <div class="spinners">
    
    <div class="spinner-block">
      <h2>#1</h2>
      <div class="spinner spinner-1"></div>
    </div>
    
    <div class="spinner-block">
      <h2>#2</h2>
      <div class="spinner spinner-2"></div>
    </div>
    
    <div class="spinner-block">
      <h2>#3</h2>
      <div class="spinner spinner-3"></div>
    </div>
    
    <div class="spinner-block">
      <h2>#4</h2>
      <div class="spinner spinner-4"></div>
    </div>
    
    <div class="spinner-block">
      <h2>#5</h2>
      <div class="spinner spinner-5"></div>
    </div>
    
  </div>
</div>

script.js

// Check here: 
//https://github.com/eisenfox/css-spinners

style.scss

//variables
$bg-color: #fff; //container background-color;
$basic-dark-color: #212121; //color of the spinner
$border-width: 4px; //width of spinners border
$basic-spinner-dimensions: 125px; //width and height of spinner
$main-spinner-dimensions: $basic-spinner-dimensions - $border-width * 2; //width and height of bigger circle
$small-spinner-dimensions: $main-spinner-dimensions * 0.7; //width and height of smaller circle

/* COMMON STYLES: YOU DON'T NEED THEM */
body {
  background-color: $bg-color;
}

.container {
  width: 960px;
  margin: 70px auto 0px auto;
  text-align: center;
  
  h1 {
    font: {
      family: 'Lato', sans-serif;
      size: 40px;  
    }
    color: $basic-dark-color;
    margin-bottom: 20px;
    
    & + a {
      color: $basic-dark-color;
      font: {
        family: 'Lato', sans-serif;
        size: 20px;  
      }
      text-decoration: none;
    }
    
    &:before {
      content: "{";
      display: inline-block;
      padding-right: 20px;
    }
    
    &:after {
      content: "}";
      display: inline-block;
      padding-left: 20px;
    }
    
    
  }
  
  .spinners {
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    
    .spinner-block {
      width: $basic-spinner-dimensions;
      text-align: center;
      margin-right: 83px;
      
      &:nth-child(5n) {
        margin-right: 0px;
      }
      
      h2 {
        font: {
          family: 'Pacifico', cursive;
          size: 17px;
        }
        color: $basic-dark-color;
        margin-bottom: 20px;
      }
    }
  }
}

/* YOU NEED THESE STYLES */

/* spinner style */
.spinner {
    position: relative;
    width: $basic-spinner-dimensions;
    height: $basic-spinner-dimensions;

    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      border-width: 4px;
      border-style: solid;
      border-radius: 50%;
    }
  }

/* spinner-1 styles */
.spinner.spinner-1 {
  
    @keyframes rotate-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes anti-rotate-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }
  
  &:before {
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-bottom-color: $basic-dark-color;
    border-right-color: $basic-dark-color;
    border-top-color: rgba($basic-dark-color, 0);
    border-left-color: rgba($basic-dark-color, 0);
    top: 0px;
    left: 0px;
    animation: rotate-animation 1s linear 0s infinite;
  }
  
  &:after {
    width: $small-spinner-dimensions;
    height: $small-spinner-dimensions;
    border-bottom-color: $basic-dark-color;
    border-right-color: $basic-dark-color;
    border-top-color: rgba($basic-dark-color, 0);
    border-left-color: rgba($basic-dark-color, 0);
    top: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
    left: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
    animation: anti-rotate-animation 0.85s linear 0s infinite;
  }
}

/* spinner-2 styles */

.spinner.spinner-2 {
  
  @keyframes scale {
    0% {
      transform: scale(1);
      border-style: solid;
    }
    
    100% {
      transform: scale(0);
      border-style: dashed;
    }
  }
  
  &:before {
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-color: $basic-dark-color;
    top: 0px;
    left: 0px;
    animation: scale 1s linear 0s infinite alternate;
  }
  
  &:after {
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-color: $basic-dark-color;
    top: 0;
    left: 0;
    animation: scale 1s linear 0s infinite alternate-reverse;
  }
}

/* spinner-3 styles */

.spinner.spinner-3 {
  
  @keyframes scale-2 {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    
    50% {
      transform: scale(0.7);
      opacity: 1;
    }
    
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  
  &:before {
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-color: $basic-dark-color;
    top: 0px;
    left: 0px;
    animation: scale-2 1s linear 0s infinite;
  }
  
  &:after {
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-color: $basic-dark-color;
    top: 0;
    left: 0;
    opacity: 0;
    animation: scale-2 1s linear 0.5s infinite;
  }
}

/* spinner-4 styles */

.spinner.spinner-4 {
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    
    100% {
      transform: rotate(360deg);
    }
  }
  
  &:before {
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-color: $basic-dark-color;
    top: 0px;
    left: 0px;
    overflow: hidden;
  }
  
  &:after {
    width: $small-spinner-dimensions  * 0.2;
    height: $small-spinner-dimensions * 0.2;
    border-width: $border-width - 1;
    border-color: $basic-dark-color;
    top: $main-spinner-dimensions / 2 - $border-width * 2;
    left: 0;
    overflow: hidden;
    transform-origin: $main-spinner-dimensions / 2 + $border-width;
    animation: rotate 1.2s linear 0s infinite;
  }
}

/* spinner-5 styles */

.spinner.spinner-5 {
  
  @keyframes border-animate {
    0% {
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    }
    
    25% {
      border-top-color: $basic-dark-color;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    }
    
    50% {
      border-top-color: $basic-dark-color;
      border-right-color: $basic-dark-color;
      border-bottom-color: transparent;
      border-left-color: transparent;
    }
    
    75% {
      border-top-color: $basic-dark-color;
      border-right-color: $basic-dark-color;
      border-bottom-color: $basic-dark-color;
      border-left-color: transparent;
    }
    
    100% {
      border-top-color: $basic-dark-color;
      border-right-color: $basic-dark-color;
      border-bottom-color: $basic-dark-color;
      border-left-color: $basic-dark-color;
    }
  }
  
  &:before {
    width: 0;
    height: 0;
    border-color: $basic-dark-color;
    top: 0px;
    left: 0px;
    border-width: $basic-spinner-dimensions / 2;
    border-style:  solid;
    animation: border-animate 1.6s linear 0s infinite alternate;
  }
  
  &:after {
    width: $small-spinner-dimensions;
    height: $small-spinner-dimensions;
    border-color: $basic-dark-color;
    top: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
    left: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
    background-color: $bg-color;
  }
}