color bar

by James Connolly

HTML

<div class="color-bar cyan">
  <div class="color-picker">
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

body {
  padding: 15px;
}

.color-bar {
  width: 100%;
  height: 50px;
  border-radius: 6px;
  background: -webkit-linear-gradient(left, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
  background: -moz-linear-gradient(left, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
  background: -o-linear-gradient(left, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
  background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
  position: relative;

  .color-picker {
    width: 10px;
    height: 54px;
    border: 2px solid #000;
    border-radius: 500px;
    position: absolute;
    top: -2px;
    
    transition: left 0.3s ease-in-out;
    //left: 50%;
  }

  //red
  &.red {
    .color-picker {
      left: 1%
    }
  }

  //yellow-green
  &.yellow-green {
    .color-picker {
      left: 30%
    }
  }

  //cyan
  &.cyan {
    .color-picker {
      left: 50%
    }
  }

  //blue
  &.blue {
    .color-picker {
      left: 65%
    }
  }

  //pink
  &.pink {
    .color-picker {
      left: 85%
    }
  }
}