CSS Gears

CSS gears made with just LESS and HTML

by Adrián Gómez Llorente

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<!--
 * Gears made with just CSS.
 * @author: Adrán Gómez Llorente
 * @website: http://adgllorente.com
-->
<span class="gear">
  <span class="body"></span>
  <span class="tooth"></span>
  <span class="tooth rotate-45"></span>
  <span class="tooth rotate-90"></span>
  <span class="tooth rotate-135"></span>
  <span class="hole"></span>
</span>
<span class="gear">
  <span class="body"></span>
  <span class="tooth"></span>
  <span class="tooth rotate-45"></span>
  <span class="tooth rotate-90"></span>
  <span class="tooth rotate-135"></span>
  <span class="hole"></span>
</span>
<span class="gear">
  <span class="body"></span>
  <span class="tooth"></span>
  <span class="tooth rotate-45"></span>
  <span class="tooth rotate-90"></span>
  <span class="tooth rotate-135"></span>
  <span class="hole"></span>
</span>
<span class="gear">
  <span class="body"></span>
  <span class="tooth"></span>
  <span class="tooth rotate-45"></span>
  <span class="tooth rotate-90"></span>
  <span class="tooth rotate-135"></span>
  <span class="hole"></span>
</span>

CSS

/**
 * Gears made with just CSS.
 * @author: Adrán Gómez Llorente
 * @website: http://adgllorente.com
 */
html, body {
 height: 100%;
}

body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #490A3D;
  margin: 0;
  flex-wrap: wrap;
}

.gear {
  margin: 20px;
  
  &:nth-of-type(1) {
    .make-gear(24px, 'clockwise', #bd1550, #490a3d);
  }
  
  &:nth-of-type(2) {
    .make-gear(100px, 'reverse', #e97f02, #490a3d);
  }
  
  &:nth-of-type(3) {
    .make-gear(50px, 'clockwise', #f8ca00, #490a3d);
  }
  
  &:nth-of-type(4) {
    .make-gear(200px, 'reverse', #8a9b0f, #490a3d);
  }
}

// Mixin to create a gear.
.make-gear(@size, @direction: 'clockwise', @color: black, @bg: white) {
  @tooth-size: @size / 12;
  @tooth-width: @size / 6;
  @hole-size: @size / 2;
  
  animation: @direction 2.0s infinite linear;
  display: inline-block;
  width: @size;
  height: @size;
  
  > .body {
    position: absolute;
    background-color: @color;
    width: @size - @tooth-size * 2;
    height: @size - @tooth-size * 2;
    border-radius: 50%;
    top: @tooth-size;
    left: @tooth-size;
  }
  
  > .hole {
    position: absolute;
    top: (@size - @hole-size) / 2;
    left: (@size - @hole-size) / 2;
    background-color: @bg;
    width: @hole-size;
    height: @hole-size;
    border-radius: 50%; 
  }
  
  > .tooth {
    position: absolute;
    left: (@size - @tooth-width) / 2;
    width: @tooth-width;
    height: @size;
    background-color: @color;

    &.rotate-45 {
      transform: rotate(45deg);
    }

    &.rotate-90 {
      transform: rotate(90deg);
    }

    &.rotate-135 {
      transform: rotate(135deg);
    }
  }
  
  // Rotatin mixin
  @keyframes "clockwise" {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  // Rotation reverse mixin
  @keyframes "reverse" {
    from {
      transform: rotate(359deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
}

JavaScript

/**
 * Less support.
 */
$('head style[type="text/css"]').attr('type','text/less');
less.env = 'development';
less.refreshStyles();