CSS Gears

css-gears.markdown

CSS Gears

I made these for my new portfolio site. You might be able to use this as a loading animation or something like that. I had this demo up here before but I think codepen ate it. They do look pretty tasty.

A Pen by Alex Tebbs on CodePen.

License.

index.html

<div class="container">
  <div class="gearbox">
  <div class="overlay"></div>
    <div class="gear one">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <div class="gear two">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <div class="gear three">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <div class="gear four large">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <h1>Loading...</h1>
</div>

script.js

// I made these for my new portfolio site. You might be able to 
// use this as a loading animation or something like that. I had this
// demo up here before but I think Codepen ate it. They do look 
// pretty tasty.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.sass

@import compass

@import compass/css3

@function black($opacity)
  @return rgba(0,0,0,$opacity)

@function white($opacity)
  @return rgba(255,255,255,$opacity)

// keyframes mixin
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content

*
  +box-sizing(border-box)

$tancolor: #D0B076
$linecolor: rgba(0,0,255,0.05)
$baseline: 24px

$gearbox-height: 150px

html
  height: 100%

body
  background: #333
  position: relative
  height: 100%
  margin: 0px

+keyframes(clockwise)
  0%
    +transform(rotate(0deg))

  100%
    +transform(rotate(360deg))

+keyframes(counter-clockwise)
  0%
    +transform(rotate(0deg))

  100%
    +transform(rotate(-360deg))

.container
  position: absolute
  top: 50%
  left: 50%
  margin-left: -100px
  height: $gearbox-height
  width: 200px
  margin-top: -($gearbox-height / 2)

.gearbox
  background: #111
  height: $gearbox-height
  width: 200px

  position: relative
  border: none
  overflow: hidden
  +border-radius(6px)
  +box-shadow(0px 0px 0px 1px white(0.1))
  

  .overlay
    +border-radius(6px)
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: 10
    +box-shadow(inset 0px 0px 20px black(1))
    +single-transition(background, .2s)

  &.turn .overlay
    background: rgba(0,0,0,0.0)

$gear-color: #555

$gear-size: 60px

$large-gear-size: $gear-size * 2

.gear
  position: absolute
  height: $gear-size
  width: $gear-size
  +box-shadow(0px -1px 0px 0px lighten($gear-color, 20%), 0px 1px 0px 0px darken($gear-color, 40%))
  +border-radius($gear-size / 2)

  &.large
    height: $large-gear-size
    width: $large-gear-size
    +border-radius($large-gear-size / 2)

    &:after
      $large-gear-inner-size: $large-gear-size - 24px
      height: $large-gear-size - 24px
      width: $large-gear-size - 24px
      +border-radius(($large-gear-size - 24px) / 2)
      margin-left: -(($large-gear-size - 24px) / 2)
      margin-top: -(($large-gear-size - 24px) / 2)

  $center: 10px

  &.one
    top: $center + 2px
    left: $center

  &.two
    top: 51 + $center
    left: 50px + $center

  &.three
    top: 100px + $center
    left: $center

  &.four
    top: $center + 3px
    left: $center + 118px

  &:after
    content: ''
    position: absolute
    height: $gear-size - 24px
    width: $gear-size - 24px
    +border-radius(36px)
    background: #111
    // border: 1px solid lighten($gear-color, 10%)
    top: 50%
    left: 50%
    margin-left: -(($gear-size - 24px) / 2)
    margin-top: -(($gear-size - 24px) / 2)
    z-index: 3
    +box-shadow(0px 0px 10px white(0.1), inset 0px 0px 10px black(0.1), inset 0px 2px 0px 0px darken($gear-color,30%), inset 0px -1px 0px 0px lighten($gear-color, 20%) )

.gear-inner
  position: relative
  height: 100%
  width: 100%
  background: $gear-color
  -webkit-animation-iteration-count: infinite
  -moz-animation-iteration-count: infinite
  +border-radius($gear-size / 2)
  border: 1px solid white(0.1)

  .large &
    +border-radius($large-gear-size / 2)

  .gear.one &
    -webkit-animation: counter-clockwise 3s infinite linear
    -moz-animation: counter-clockwise 3s infinite linear

  .gear.two &
    -webkit-animation: clockwise 3s infinite linear
    -moz-animation: clockwise 3s infinite linear

  .gear.three &
    -webkit-animation: counter-clockwise 3s infinite linear
    -moz-animation: counter-clockwise 3s infinite linear

  .gear.four &
    -webkit-animation: counter-clockwise 6s infinite linear
    -moz-animation: counter-clockwise 6s infinite linear

  .bar
    $bar-width: 16px
    $bar-height: 8px

    $actual-height: $bar-width
    $actual-width: ($bar-height * 2) + $gear-size
    background: $gear-color
    height: $actual-height
    width: $actual-width
    position: absolute
    left: 50%
    margin-left: -($actual-width / 2)
    top: 50%
    margin-top: -($actual-height / 2)
    +border-radius(2px)
    border-left: 1px solid white(0.1)
    border-right: 1px solid white(0.1)

    .large &
      $large-bar-width: ($bar-height * 2) + ($gear-size * 2)
      margin-left: -($large-bar-width / 2)
      width: $large-bar-width

    &:nth-child(2)
      +transform(rotate(60deg))

    &:nth-child(3)
      +transform(rotate(120deg))

    &:nth-child(4)
      +transform(rotate(90deg))

    &:nth-child(5)
      +transform(rotate(30deg))

    &:nth-child(6)
      +transform(rotate(150deg))

h1
  font-family: 'Helvetica'
  text-align: center
  text-transform: uppercase
  color: #888
  font-size: 19px
  padding-top: 10px
  text-shadow: 1px 1px 0px #111