A Pen by Jan-Kanty Pawelski.

index.html

<h1>Hover to animate</h2>
<ul>
  <li>
    <div class="circle spinner1"></div>
    <label>Circle 1</label>
  </li>
  <li>
    <div class="circle spinner2"></div>
    <label>Circle 2</label>
  </li>
  <li>
    <div class="circle spinner3"></div>
    <label>Circle 3</label>
  </li>
  <li>
    <div class="circle spinner4"></div>
    <label>Circle 4</label>
  </li>
  <li>
    <div class="tactical-nuke">
      <div></div>
    </div>
    <label>Tactical nuke</label>
  </li>
  <li>
    <div class="xbox">
      <div>
        <div></div>
      </div>
    </div>
    <label>xBox</label>
  </li>
  <li>
    <div class="bubbles">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <label>Bubbles</label>
  </li>
  <li>
    <div class="bubbles horizontal">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <label>Bubbles ( horizontal )</label>
  </li>
  <li>
    <div class="bars animation1">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <label>Bars ( animation 1 )</label>
  </li>
  <li>
    <div class="bars animation2">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <label>Bars ( animation 2 )</label>
  </li>
  <li>
    <div class="bars horizontal animation1">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <label>Bars ( animation 1, horizontal )</label>
  </li>
  <li>
    <div class="bars horizontal animation2">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <label>Bars ( animation 2, horizontal )</label>
  </li>
</ul>

Pure-CSS-Loading-spinners.markdown

Pure CSS Loading spinners

A Pen by Jan-Kanty Pawelski on CodePen.

License.

style.sass

$mainColor: #9a3

@keyframes rotate
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes -rotate
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(-360deg)

@keyframes bounce
  0%, 80%, 100%
    transform: scale(1)
  40%
    transform: scale(0)

@keyframes resizing1
  0%, 60%, 100%
    width: 20px
  30%
    width: 30px

@keyframes resizing2
  0%, 100%
    width: 20px
  40%
    width: 30px

html
  padding: 20px
  background: #e5e5e5

body
  margin: 0 auto
  width: 100%
  max-width: 400px
  font: 300 14px/20px 'Helvetica Neue', sans-serif

h1
  padding: 10px 0
  border: solid #666
  border-width: 1px 0
  color: #666
  font-size: 24px
  font-weight: 100
  line-height: 30px
  text-align: center
  text-transform: uppercase

ul
  list-style: none

li
  margin-top: 20px
  position: relative

  & > div
    margin: 0 auto
    width: 60px
    height: 60px

  & > div, & > div *
    animation-play-state: paused

  &:hover > div, &:hover > div *
    animation-play-state: running

label
  padding: 5px
  background: #333
  border-radius: 2px
  color: #fff
  white-space: nowrap
  position: absolute
  top: 50%
  left: 50%
  transform: translate(50px, -50%)

  &:before
    content: ''
    border-width: 5px 5px 5px 0
    border-style: solid
    border-color: transparent #333
    position: absolute
    top: 50%
    left: -5px
    transform: translatey(-50%)




.circle
  border: 3px solid #fff
  border-radius: 50%
  animation: rotate linear 2s infinite

  &.spinner1
    border-top-color: $mainColor

  &.spinner2
    border-top-color: $mainColor
    border-right-color: $mainColor

  &.spinner3
    border-top-color: $mainColor
    border-right-color: $mainColor
    border-bottom-color: $mainColor

  &.spinner4
    border-top-color: $mainColor
    border-bottom-color: $mainColor




.tactical-nuke
  &, div
    padding: 6px
    border: 6px solid transparent
    border-top-color: #fff
    border-bottom-color: #fff
    border-radius: 50%

  &
    animation: rotate linear 2s infinite

  div
    height: 100%
    animation: -rotate linear 1s infinite




.xbox
  &, div
    padding: 3px
    border: 3px solid transparent
    border-top-color: #fff
    border-radius: 50%
    animation: rotate linear 2s infinite

  div
    height: 100%




.bubbles
  div
    margin: 0 auto
    width: 16px
    height: 16px
    background: #fff
    border-radius: 50%
    animation: bounce linear 1.2s infinite

    & + div
      margin-top: 6px

    &:nth-child(2)
      animation-delay: .4s

    &:nth-child(3)
      animation-delay: .8s

  &.horizontal
    transform: rotate(-90deg)




.bars
  padding: 7px 0

  div
    margin: 0 auto
    width: 20px
    height: 6px
    background: #fff
    animation: ease-in-out 1s infinite

    & + div
      margin-top: 4px

    &:nth-child(2)
      animation-delay: .2s

    &:nth-child(3)
      animation-delay: .4s

    &:nth-child(4)
      animation-delay: .6s

    &:nth-child(5)
      animation-delay: .8s
  
  &.animation1
    div
      animation-name: resizing1

  &.animation2
    div
      animation-name: resizing2

  &.horizontal
    transform: rotate(-90deg)