cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              #stage.r1
  ol.dots
    - for (var $i = 0, length = 81; $i < length; $i++) {
      li.dot #{$i + 1}
    - }
            
          
!
            
              $DOT_SIZE : 10px;
$DOT_GAP  : 4px;

%on {
  background: #fff;
  box-shadow: 0 0 $DOT_GAP #fff;
}

html {
  cursor: pointer;
}

body {
  background: #000;
}

.dots {
  $DOTS_SIZE : ($DOT_SIZE + $DOT_GAP) * 9 + $DOT_GAP;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  padding: $DOT_GAP / 2;
  width: $DOTS_SIZE; height: $DOTS_SIZE;
  overflow: hidden;
  
  .r0 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }

      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }

      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(63) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(72) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r1 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }

      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }

      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(53) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r2 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }

      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r3 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }

      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r4 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }

      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(28) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(66) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
      
      &:nth-child(75) {
        @extend %on;
      }
    }
  }
  
  .r5 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }

      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(28) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(68) {
        @extend %on;
      }
      
      &:nth-child(76) {
        @extend %on;
      }
      
      &:nth-child(77) {
        @extend %on;
      }
    }
  }
  
  .r6 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }

      &:nth-child(19) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(38) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
    }
  }
  
  .r7 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }

      &:nth-child(20) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(66) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
    }
  }
  
  .r8 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }

      &:nth-child(20) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r9 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r10 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(53) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r11 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r12 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .r13 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(28) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(66) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
      
      &:nth-child(75) {
        @extend %on;
      }
    }
  }
  
  .r14 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(28) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(68) {
        @extend %on;
      }
      
      &:nth-child(76) {
        @extend %on;
      }
      
      &:nth-child(77) {
        @extend %on;
      }
    }
  }
  
  .r15 & {
    .dot {
      &:nth-child(2) {
        @extend %on;
      }
      
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(11) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(19) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(38) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
    }
  }
  
  .r16 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(20) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(66) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
    }
  }
  
  .r17 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(20) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
  
  .j0 & {
    .dot {
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(68) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(76) {
        @extend %on;
      }
      
      &:nth-child(77) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
    }
  }
  
  .j1 & {
    .dot {
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(51) {
        @extend %on;
      }
      
      &:nth-child(53) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
    }
  }

  .j2 & {
    .dot {
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(44) {
        @extend %on;
      }
      
      &:nth-child(51) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(63) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(72) {
        @extend %on;
      }
      
      &:nth-child(77) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
    }
  }

  .j3 & {
    .dot {
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(5) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(24) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(69) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(77) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
    }
  }

  .j4 & {
    padding-bottom: $DOT_SIZE + $DOT_GAP;
    
    .dot {
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(5) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(68) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
    }
  }
  
  .j5 &, .j10 & {
    padding-bottom: ($DOT_SIZE + $DOT_GAP) * 8;
    
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(5) {
        @extend %on;
      }
      
      &:nth-child(6) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(15) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
    }
  }
  
  .j6 &, .j9 & {
    padding-bottom: ($DOT_SIZE + $DOT_GAP) * 15;
    
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(5) {
        @extend %on;
      }
      
      &:nth-child(6) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(15) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(68) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
    }
  }
  
  .j7 &, .j8 & {
    padding-bottom: ($DOT_SIZE + $DOT_GAP) * 16;
    
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(5) {
        @extend %on;
      }
      
      &:nth-child(6) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(15) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(39) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(57) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(68) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
    }
  }
  
  .j11 & {
    padding-bottom: ($DOT_SIZE + $DOT_GAP) * 2;
    
    .dot {
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(6) {
        @extend %on;
      }
      
      &:nth-child(7) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(15) {
        @extend %on;
      }
      
      &:nth-child(16) {
        @extend %on;
      }
      
      &:nth-child(25) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(35) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(44) {
        @extend %on;
      }
      
      &:nth-child(50) {
        @extend %on;
      }
      
      &:nth-child(51) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(58) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(66) {
        @extend %on;
      }
      
      &:nth-child(67) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
    }
  }
  
  .j12 & {   
    .dot {
      &:nth-child(15) {
        @extend %on;
      }
      
      &:nth-child(16) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(24) {
        @extend %on;
      }
      
      &:nth-child(25) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(35) {
        @extend %on;
      }
      
      &:nth-child(44) {
        @extend %on;
      }
      
      &:nth-child(51) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(72) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
    }
  }
  
.j13 & {   
    .dot {      
      &:nth-child(24) {
        @extend %on;
      }
      
      &:nth-child(25) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(35) {
        @extend %on;
      }

      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(45) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(53) {
        @extend %on;
      }
      
      &:nth-child(54) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(78) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
      
      &:nth-child(81) {
        @extend %on;
      }
    }
  }
  
.j14 & {   
    .dot {      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(53) {
        @extend %on;
      }
      
      &:nth-child(54) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(63) {
        @extend %on;
      }
      
      &:nth-child(70) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(72) {
        @extend %on;
      }
      
      &:nth-child(79) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
      
      &:nth-child(81) {
        @extend %on;
      }
    }
  }
  
  .j15 & {
    .dot {
      &:nth-child(6) {
        @extend %on;
      }
      
      &:nth-child(7) {
        @extend %on;
      }
      
      &:nth-child(15) {
        @extend %on;
      }
      
      &:nth-child(16) {
        @extend %on;
      }
      
      &:nth-child(25) {
        @extend %on;
      }
      
      &:nth-child(26) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(35) {
        @extend %on;
      }
      
      &:nth-child(43) {
        @extend %on;
      }
      
      &:nth-child(44) {
        @extend %on;
      }
      
      &:nth-child(51) {
        @extend %on;
      }
      
      &:nth-child(52) {
        @extend %on;
      }
      
      &:nth-child(53) {
        @extend %on;
      }
      
      &:nth-child(54) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(72) {
        @extend %on;
      }
      
      &:nth-child(80) {
        @extend %on;
      }
      
      &:nth-child(81) {
        @extend %on;
      }
    }
  }
  
  .j16 & {
    .dot {
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(5) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(14) {
        @extend %on;
      }
      
      &:nth-child(21) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(24) {
        @extend %on;
      }
      
      &:nth-child(25) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(32) {
        @extend %on;
      }
      
      &:nth-child(34) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(42) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(51) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(81) {
        @extend %on;
      }
    }
  }
  
  .j17 & {
    .dot {
      &:nth-child(3) {
        @extend %on;
      }
      
      &:nth-child(4) {
        @extend %on;
      }
      
      &:nth-child(12) {
        @extend %on;
      }
      
      &:nth-child(13) {
        @extend %on;
      }
      
      &:nth-child(22) {
        @extend %on;
      }
      
      &:nth-child(23) {
        @extend %on;
      }
      
      &:nth-child(29) {
        @extend %on;
      }
      
      &:nth-child(30) {
        @extend %on;
      }
      
      &:nth-child(31) {
        @extend %on;
      }
      
      &:nth-child(33) {
        @extend %on;
      }
      
      &:nth-child(40) {
        @extend %on;
      }
      
      &:nth-child(41) {
        @extend %on;
      }
      
      &:nth-child(47) {
        @extend %on;
      }
      
      &:nth-child(48) {
        @extend %on;
      }
      
      &:nth-child(49) {
        @extend %on;
      }
      
      &:nth-child(56) {
        @extend %on;
      }
      
      &:nth-child(59) {
        @extend %on;
      }
      
      &:nth-child(60) {
        @extend %on;
      }
      
      &:nth-child(61) {
        @extend %on;
      }
      
      &:nth-child(62) {
        @extend %on;
      }
      
      &:nth-child(65) {
        @extend %on;
      }
      
      &:nth-child(71) {
        @extend %on;
      }
      
      &:nth-child(73) {
        @extend %on;
      }
      
      &:nth-child(74) {
        @extend %on;
      }
    }
  }
}

.dot {
  float: left;
  margin: $DOT_GAP / 2;
  border-radius: 2px;
  width: $DOT_SIZE; height: $DOT_SIZE;
  font-size: 10px;
  text-indent: -9999px;
}
            
          
!
            
              (function(win, doc) {

  "use strict";

  class Action {
    constructor(obj) {
      this.PREFIX    = obj.prefix;
      this.LENGTH    = obj.length;
      this.MAX_INDEX = this.LENGTH - 1;
      this.index       = 0;
      this.timer       = null;
      this.isDoingFlag = false;
    }
    
    stop() {
      clearTimeout(this.timer);
      this.index = 0;
      this.isDoingFlag = false;
    }
    
    start() {
      this.stop();
      this.isDoingFlag = true;
    }
    
    next() {
      this.index = ++this.index % this.LENGTH;
    }
    
    getKlassName() {
      return this.PREFIX + this.index;
    }
    
    isDoing() {
      return this.isDoingFlag;
    }
  }
  
  class Runner {    
    constructor(id) {
      this.INTERVAL = 60;
      this.actionRun     = new Action({
        prefix : "r",
        length : 18
      });
      this.actionJump    = new Action({
        prefix : "j",
        length : 17
      });
      this.actionSpecial = new Action({
        prefix : "s",
        length : 1
      });
      this.elm = doc.getElementById(id);
    }
    
    start() {
      this.actionRun.start();
      this.actionRun.timer = setInterval(this.step.bind(this), this.INTERVAL);
    }
    
    jump() {
      if (this.actionRun.isDoing()) {
        this.actionRun.stop();
        this.actionJump.start();
        this.actionJump.timer = setInterval(this.flow.bind(this), this.INTERVAL);
      }
    }
    
    step() {
      this.actionRun.next();
      this.elm.className = this.actionRun.getKlassName();
    }
    
    flow() {
      if (this.actionJump.index < this.actionJump.MAX_INDEX) {
        this.actionJump.next();
        this.elm.className = this.actionJump.getKlassName();
      } else {
        this.actionJump.stop();
        this.start();
      }
    }
  }
  
  main();
  
  function main() {
    var runner = new Runner("stage");

    runner.start();
    
    doc.addEventListener("click", function() {
      runner.jump();
    }, false);
  }
  
})(this, document);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console