Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="bike">
  <div class="wheel wheel--front">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
  <div class="wheel wheel--back">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
  <div class="frame frame--top"></div>
  <div class="frame frame--bottom"></div>
  <div class="saddle__post"></div>
  <div class="saddle"></div>
  <div class="handle-bar__post"></div>
  <div class="handle-bar__connector"></div>
  <div class="handle-bar"></div>
  
  <div class="note note--0"></div>
  <div class="note note--1"></div>
  <div class="note note--2"></div>
  <div class="note note--3"></div>
  <div class="note note--4"></div>
  <div class="note note--5"></div>
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$color: #666;
$size: 200px;
$thickness: $size/50;

.bike {
 position: relative;
 width: $size;
 height: $size;
 border: 1px dashed $color;
}

.frame--top {
  transform: translateX(-50%) skew(30deg);
  border: $thickness solid $color;
  border-bottom: 0;
  border-left: 0;
  width: 32%;
  height: 30%;
  position: absolute;
  bottom: 17%;
  left: 57%;
}

.frame--bottom {
  transform: translateX(-50%) skew(55deg);
  border: $thickness solid $color;
  border-top: 0;
  border-right: 0;
  width: 25%;
  height: 20%;
  position: absolute;
  bottom: 17%;
  left: 56%;
}

.saddle__post {
  transform: rotate(10deg);
  height: 40%;
  border-right: $thickness solid $color;
  position: absolute;
  bottom: 17%;
  left: 60%;
}

.saddle {
  transform: rotate(-5deg);
  position: absolute;
  border-radius: 10px;
  width: 13%;
  height: 3%;
  background-color: $color;
  left: 55%;
  bottom: 55%;
}

.handle-bar__post {
  transform: rotate(23deg);
  height: 40%;
  border-right: $thickness solid $color;
  position: absolute;
  bottom: 17%;
  left: 26%;
}

.handle-bar__connector {
  width: 8%;
  border-top: $thickness solid $color;
  position: absolute;
  left: 26%;
  bottom: 54.5%;
}

.handle-bar {
  transform: rotate(40deg);
  border-radius: 50%;
  position: absolute;
  width: 8%;
  height: 12%;
  left: 20%;
  bottom: 41.8%;
  border: $thickness solid $color;
  border-right-color: transparent;
  border-top-color: transparent;
}

.wheel {
 border-radius: 50%;
 border: $thickness solid $color;
 height: $size / 3;
 width: $size / 3;
 position: absolute;    
 -webkit-animation-name: spin;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}

.wheel--front {
  bottom: 0;
  left: 0;
}

.wheel--back {
  bottom: 0;
  right: 0;
}

.spoke {
  width: 100%;
  position: absolute;
  top: 50%;
  border-bottom: 1px solid lighten($color, 40%);
}

.spoke--1 {
  transform: rotate(36deg);
}
.spoke--2 {
  transform: rotate(72deg);
}
.spoke--3 {
  transform: rotate(108deg);
}
.spoke--4 {
  transform: rotate(144deg);
}

.note {
  border-right: $thickness/3 solid $color;
  height: 5%;
  position: absolute;
 -webkit-animation-name: rise-and-fade;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
  
  &:before { 
    content: ' ';
    position: absolute;
    bottom: -10%;
    right: -$thickness/4;
    height: $thickness;
    width: $thickness;
    border-radius: 50%;
    background-color: $color;
  }
}

.note--0 {
  top: 10%;
  left: 25%;
}

.note--1 {
  top: 10%;
  left: 55%;
}

.note--2 {
  top: 15%;
  left: 35%;
}

.note--3 {
  top: 10%;
  left: 25%;
}

.note--4 {
  top: 25%;
  left: 10%;
}

.note--5 {
  top: 20%;
  right: 16%;
}
@-webkit-keyframes spin {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@-webkit-keyframes rise-and-fade {
  from { transform: translateY(200%); }
  to   { transform: translateY(-200%); }
}

SassMeister-output.css

.bike {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px dashed #666;
}

.frame--top {
  transform: translateX(-50%) skew(30deg);
  border: 4px solid #666;
  border-bottom: 0;
  border-left: 0;
  width: 32%;
  height: 30%;
  position: absolute;
  bottom: 17%;
  left: 57%;
}

.frame--bottom {
  transform: translateX(-50%) skew(55deg);
  border: 4px solid #666;
  border-top: 0;
  border-right: 0;
  width: 25%;
  height: 20%;
  position: absolute;
  bottom: 17%;
  left: 56%;
}

.saddle__post {
  transform: rotate(10deg);
  height: 40%;
  border-right: 4px solid #666;
  position: absolute;
  bottom: 17%;
  left: 60%;
}

.saddle {
  transform: rotate(-5deg);
  position: absolute;
  border-radius: 10px;
  width: 13%;
  height: 3%;
  background-color: #666;
  left: 55%;
  bottom: 55%;
}

.handle-bar__post {
  transform: rotate(23deg);
  height: 40%;
  border-right: 4px solid #666;
  position: absolute;
  bottom: 17%;
  left: 26%;
}

.handle-bar__connector {
  width: 8%;
  border-top: 4px solid #666;
  position: absolute;
  left: 26%;
  bottom: 54.5%;
}

.handle-bar {
  transform: rotate(40deg);
  border-radius: 50%;
  position: absolute;
  width: 8%;
  height: 12%;
  left: 20%;
  bottom: 41.8%;
  border: 4px solid #666;
  border-right-color: transparent;
  border-top-color: transparent;
}

.wheel {
  border-radius: 50%;
  border: 4px solid #666;
  height: 66.66667px;
  width: 66.66667px;
  position: absolute;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.wheel--front {
  bottom: 0;
  left: 0;
}

.wheel--back {
  bottom: 0;
  right: 0;
}

.spoke {
  width: 100%;
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #cccccc;
}

.spoke--1 {
  transform: rotate(36deg);
}

.spoke--2 {
  transform: rotate(72deg);
}

.spoke--3 {
  transform: rotate(108deg);
}

.spoke--4 {
  transform: rotate(144deg);
}

.note {
  border-right: 1.33333px solid #666;
  height: 5%;
  position: absolute;
  -webkit-animation-name: rise-and-fade;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
.note:before {
  content: ' ';
  position: absolute;
  bottom: -10%;
  right: -1px;
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: #666;
}

.note--0 {
  top: 10%;
  left: 25%;
}

.note--1 {
  top: 10%;
  left: 55%;
}

.note--2 {
  top: 15%;
  left: 35%;
}

.note--3 {
  top: 10%;
  left: 25%;
}

.note--4 {
  top: 25%;
  left: 10%;
}

.note--5 {
  top: 20%;
  right: 16%;
}

@-webkit-keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes rise-and-fade {
  from {
    transform: translateY(200%);
  }
  to {
    transform: translateY(-200%);
  }
}

SassMeister-rendered.html

<div class="bike">
  <div class="wheel wheel--front">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
  <div class="wheel wheel--back">
    <div class="spoke spoke--0"></div>
    <div class="spoke spoke--1"></div>
    <div class="spoke spoke--2"></div>
    <div class="spoke spoke--3"></div>
    <div class="spoke spoke--4"></div>
  </div>
  <div class="frame frame--top"></div>
  <div class="frame frame--bottom"></div>
  <div class="saddle__post"></div>
  <div class="saddle"></div>
  <div class="handle-bar__post"></div>
  <div class="handle-bar__connector"></div>
  <div class="handle-bar"></div>
  
  <div class="note note--0"></div>
  <div class="note note--1"></div>
  <div class="note note--2"></div>
  <div class="note note--3"></div>
  <div class="note note--4"></div>
  <div class="note note--5"></div>
  
</div>