Pure CSS Loading spinners

index.html

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

Pure CSS Loading spinners.markdown

Pure CSS Loading spinners

A Pen by Jan-Kanty Pawelski on CodePen.

License.

style.css

$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

h1
  padding: 10px 0
  border: solid #666
  border-width: 1px 0
  color: #666
  font-size: 32px
  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 10px
  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)

styles

<link href="//pawelski.io/reset.sass" rel="stylesheet" />
<link href="//pawelski.io/codepen.sass" rel="stylesheet" />