Css3 Spinners

css3-spinners.markdown

Css3 Spinners

Spinners animated only with css3. No javascript

A Pen by Massimiliano Ranauro on CodePen.

License.

index.html

<container>
  <h1 class="doc-title text--center">Css3 Spinners</h1>
  <div class="spinner spinner__1"></div>
  <div class="spinner spinner__2"></div>
  <div class="spinner spinner__3"></div>  
  <div class="spinner spinner__4"><span></span></div>
  </div>
  
  <div class="huckbit text--right">
  <a class="link"  href="https://github.com/huckbit" target="_blank">© huckbit 2016</a>
  </div>
  
</container>

script.js

/** ========================================
    No javascript needed for this spinners 
    ======================================== */

style.scss

@import 'https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300';

//colors
$cl-blue: #3498DB;
$cl-gray: #eee;
$cl-pink: RGBA(155, 89, 182, .5);
$cl-pacman: #FFCC00;
$cl-pinky: #F43059;
$cl-greenlg: #2ECC71;
$cl-greenstr: #1ABC9C;

@import "susy";

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
);

body {
  background-color: #EBEBEB;
  font-family: 'PT Sans Narrow', sans-serif;
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}
.link {
  text-decoration: none;
  color: $cl_blue;
}
.huckbit {
  margin-top: span(.8);
  margin-right: 2%;
  margin-bottom: 2%;
}
.doc-title {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 3em;
  color: $cl_blue;
}

container{
  @include span(10);
  @include push(1);
  margin-top: span(.2);
  background-color: #fff;
  text-align: center;
  box-shadow: 0px 40px 60px -20px     rgba(0,0,0,0.2);
}

.spinner{
  width: 70px;
  height: 70px;
  background: $cl_gray;
  border-radius: 50%;
  position: relative;
  margin: 40px;
  display: inline-block;
  &:after, &:before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}

.spinner__1 {
  &::after{
    position: absolute;
    border: 4px solid transparent;
    border-top-color: $cl_greenlg;
    border-bottom-color: $cl_greenlg;
    top: -4px;
    left: -4px;
    animation: spin 2s linear infinite;
  }
  &::before {
    position: absolute;
    top: 17px;
    left: 17px;
    height: 35px;
    width: 35px;
    background-color: $cl-greenstr;
    animation: shrink 3s ease infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.4);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1);
  }
}

.spinner__2{
  background-color: $cl_pinky;
  &:after{
    background-color: #fff;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 26px;
    left: 18px;
    transform-origin: top 50%;
    animation: shrinkFull 3s linear infinite;
  } 
  &:before{
    background-color: #fff;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 26px;
    left: 36px;
    transform-origin: top 50%;
    animation: shrinkFull 3s linear infinite;
  }
}

@keyframes shrinkFull {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(.5);
  } 
  50% {
    transform: scale(4.5);
  }
  100% {
    transform: scale(1);
  }
}

.spinner__3 {
  background: $cl-pink;
  &:after {
    width: 50px;
    height: 50px;
    background: $cl_blue;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: move-left 2s ease infinite;
  }  
  &:before {
    width: 50px;
    height: 50px;
    background: #2C3E50;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: move-right 2s ease infinite;
  }  
}

@keyframes move-left {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(20px) scale(1.2);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes move-right {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-20px) scale(1.2);
    background: $cl_blue;
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

.pacman {
  position: absolute;
  .track {
    border-top: 8px dotted $cl-gray;
    height: 0;
    position: relative;
    width: 150px;
    left: 600px;
    top: -92px;
  }
}

.spinner__4 {
  background: transparent;
  span {
    width: 8px;
    height: 8px;
    background: #000;
    position: absolute;
    border-radius: 50%;
    top: 15px;
    left: 35px;
  }
  &:before, &:after {
    display: block;
    height: 0px;
    width: 0px;
    position: absolute;
    border: 35px solid $cl_pacman;
    border-left-color: transparent;
    border-bottom-color: transparent;
    animation: chunk-top 1s ease infinite;
    //transform: rotate(-45deg);
  } 
  &:after {
    border: 35px solid $cl_pacman;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: chunk-bottom 1s ease infinite;
  }
}

@keyframes chunk-top {
  0%, 100%{
    transform: rotate(-45deg);
  }
  50%{
    transform: rotate(-80deg);
  }
}

@keyframes chunk-bottom {
  0%, 100%{
    transform: rotate(-40deg);
  }
  50%{
    transform: rotate(0deg);
  }
}