-var elSet = 5
.bar
  -for(var n = 0; n < elSet; n++)
    input.bar-input(
      type="radio"
      name="input"
      id="input_" + n
    )
    .bar-view
      label.bar-button(
        for="input_" + n
      )
      
.command click on any one of the options

$elSet: 5
$elCount: $elSet * 2
$orange: #FE9000
$orange-light: #FFB732
$yellow: #FFDD4A
$blue-light: #5ADBFF
$blue: #3C6997
$bounce: cubic-bezier(0, 0, 0, 1.97)
$smooth: cubic-bezier(0, 0.72, 0.58, 1)

.bar
  display: flex
  flex-direction: row-reverse
  margin: auto auto 0
  width: 300px
  max-width: calc(100% - 30px)

  &-input
    opacity: 0
    pointer-events: none
    position: absolute
    top: -9999px
    left: -9999px
  
    &:checked
      ~ .bar-view
          @for $n from 1 through $elCount
            $r: $elCount - $n + 1
            @if $r % 2 == 0
              &:nth-child(#{$r})
                &:after
                  transition-delay: 0.1s * ($n / 2 - 1)
                .bar-button:before
                  transition-delay: 0.1s * ($n / 2 - 1) + 0.06s
                
          &:after
            transform: scaleX(1)
          .bar-button:before
            transform: none
            opacity: 1
      
      + .bar-view
          .bar-button:after
            opacity: 1
            animation: bouncing 0.6s cubic-bezier(0, 0, 0.74, 1.04) infinite
  
  &-view
    display: flex
    flex-grow: 1
    position: relative
  
    &:after
      height: 2px
      top: calc(50% - 1px)
      transition: transform 0.06s $smooth
      transform: scaleX(0)
      background: $orange-light
      transform-origin: left
      z-index: 1
  
    &:not(:last-child)
      &:before,
      &:after
        content: ''
        width: calc(100% - 24px)
        position: absolute
        right: calc(50% + 12px)

      &:before
        height: 6px
        top: calc(50% - 3px)
        background: $blue
  
      @for $n from 1 through $elCount
        @if $n % 2 == 0
          &:nth-child(#{$n})
            &:after
              transition-delay: 0.1s * ($n / 2 - 1)
            .bar-button:before
              transition-delay: 0.1s * ($n / 2 - 1) + 0.06s
  
  &-button
    display: block
    width: 30px
    height: 30px
    margin: auto
    border-radius: 50%
    border: 3px solid $blue
    position: relative
    cursor: pointer
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3), 2px 2px 8px rgba(0, 0, 0, 0.1)
  
    &:hover:after
      transform: none
      opacity: 1
  
    &:before,
    &:after
      content: ''
      position: absolute
      pointer-events: none
  
    &:before
      width: 100%
      height: 100%
      border-radius: 50%
      background: radial-gradient(circle at center, $yellow, $orange) 
      transform: scale(0.3)
      opacity: 0
      transition:
        property: transform, opacity
        duration: 0.2s
        timing-function: $smooth
    
    &:after
      border: 8px solid transparent
      border-top-color: $blue-light
      bottom: calc(100% + 10px)
      left: calc(50% - 8px)
      transform: translateY(-10px)
      opacity: 0
      transition:
        property: transform, opacity
        duration: 0.2s
        timing-function: $bounce

.command
  font-family: 'Ubuntu Mono', monospace
  letter-spacing: 1px
  margin: 30px auto auto
  animation: fade 1s ease infinite

html, body
  width: 100%
  height: 100%
  display: flex
  flex-direction: column
  background: linear-gradient(to bottom right, transparentize($yellow, 0.9), #fff)

*
  box-sizing: border-box
  &:before, &:after
    box-sizing: inherit

@keyframes bouncing
  0%, 100%
    transform: translateY(0)
  50%
    transform: translateY(5px)

@keyframes fade
  50%
    opacity: 0.3

/*
  no JS >|
*/