HubSpot Dev & Design

Sorry, we couldn't find that page :(

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)