Enjoy this pure CSS animation as a consolation prize:
Check out the code below. Want to write cool CSS like that? You should come work for HubSpot.
@import compass
@import ../all/variables
@import ../all/mixins
=hs-throbbing-sprocket($className, $size, $color, $centerColor)
.#{$className}
+inline-block
position: relative
width: $size
height: $size
.#{$className}-center
+border-radius(50%)
+box-sizing(border-box)
z-index: 2
position: absolute
top: 50%
left: 50%
height: .5 * $size
width: .5 * $size
margin-left: -.25 * $size
margin-top: -.25 * $size
border: ($size / 9) solid $color
background: $centerColor
.#{$className}-arm
+border-radius($size / 9)
z-index: 1
position: absolute
width: $size / 2
margin-left: - ($size / 2) / 2
height: ($size / 9)
margin-top: - ($size / 9) / 2
background: $color
opacity: 0
-webkit-animation-duration: 0.8s
-moz-animation-duration: 0.8s
-ms-animation-duration: 0.8s
-o-animation-duration: 0.8s
animation-duration: 0.8s
-webkit-animation-iteration-count: infinite
-moz-animation-iteration-count: infinite
-ms-animation-iteration-count: infinite
-o-animation-iteration-count: infinite
animation-iteration-count: infinite
&:before
+border-radius(50%)
border-color: $color
border-width: ($size / 9)
border-style: solid
content: " "
width: 0
height: 0
display: block
position: absolute
&.#{$className}-arm-1, &.#{$className}-arm-2, &.#{$className}-arm-5, &.#{$className}-arm-6
&:before
left: - ($size / 9) / 2
top: - ($size / 9) / 2
&.#{$className}-arm-3, &.#{$className}-arm-4, &.#{$className}-arm-7, &.#{$className}-arm-8
&:before
right: - ($size / 9) / 2
top: - ($size / 9) / 2
&.#{$className}-arm-1
+rotate(45)
+animation-delay(0s)
&.#{$className}-arm-2
+rotate(-45)
+animation-delay(0.1s)
&.#{$className}-arm-3
+rotate(-45)
+animation-delay(0.2s)
&.#{$className}-arm-4
+rotate(45)
+animation-delay(0.3s)
&.#{$className}-arm-5
+animation-delay(0.4s)
&.#{$className}-arm-6
+rotate(90)
+animation-delay(0.5s)
&.#{$className}-arm-7
+animation-delay(0.6s)
&.#{$className}-arm-8
+rotate(90)
+animation-delay(0.7s)
+animate-arm-back-and-forth($className, #{$className}-arm-1, $size / 4, $size / 4, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-2, $size * 3 / 4, $size / 4, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-3, $size / 4, $size * 3 / 4, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-4, $size * 3 / 4, $size * 3 / 4, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-5, $size / 2, $size / 4, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-6, $size / 4, $size / 2, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-7, $size / 2, $size * 3 / 4, $size / 2, $size / 2)
+animate-arm-back-and-forth($className, #{$className}-arm-8, $size * 3 / 4, $size / 2, $size / 2, $size / 2)
=animation-delay($seconds)
-webkit-animation-delay: $seconds
-moz-animation-delay: $seconds
-ms-animation-delay: $seconds
-o-animation-delay: $seconds
animation-delay: $seconds
=animate-arm-back-and-forth($className, $name, $topStart, $leftStart, $topEnd, $leftEnd)
+keyframes($name)
0%, 100%
top: $topStart
left: $leftStart
opacity: 1
50%
top: $topEnd
left: $leftEnd
opacity: 1
.#{$className} .#{$className}-arm.#{$name}
-webkit-animation-name: #{$name}
-moz-animation-name: #{$name}
-ms-animation-name: #{$name}
animation-name: #{$name}
// Regular and large sprocket on white backgrounds
+hs-throbbing-sprocket("hs-throbbing-sprocket", 36px, $hubspotOrange, #fff)
+hs-throbbing-sprocket("hs-throbbing-sprocket-large", 72px, $hubspotOrange, #fff)
+hs-throbbing-sprocket("hs-throbbing-sprocket-large-grey", 72px, #ccc, #fff)
+hs-throbbing-sprocket("hs-throbbing-sprocket-extra-large-white-on-hubspot-grey", 144px, #fff, $hubspotDarkBlue)