Multicolor bar above form legend

I've implemented a multicolored bar as shown in the image below. It is a bar that is placed above the legend of an HTML form. (Ignore the border radius for now.)

I have accomplished this with a simple approach of using span elements.



*{
margin: 0px;
padding: 0px;
}

span{
height: 5px;
width: calc(100% / 7);
background: black;
display: inline-block;
}

span[data-color='green']{
background: #C3E279;
}

span[data-color='pale-yellow']{
background: #F7FEC8;
}

span[data-color='orange']{
background: #FFD069;
}

span[data-color='red']{
background: #F27669;
}

span[data-color='light-purple']{
background: #DC9CBE;
}

span[data-color='purple']{
background: #C59AE0;
}

span[data-color='blue']{
background: #969DCC;
}






Is there a better way to do this to make the code smarter, presentable and easy to understand to other developers?

Unless your elements serve a legitimate purpose (ie. they have content), then you should avoid using empty elements whenever possible. Instead, I recommend using a linear-gradient as a background on a content element.

Sass makes this easy to generate:

$colors: #C3E279, #F7FEC8, #FFD069, #F27669, #DC9CBE, #C59AE0, #969DCC;
$stops: ();
$current-stop: 0%;
@each $c in $colors {
    $stops: append($stops, $c $current-stop, comma);
    $current-stop: $current-stop + (100% / length($colors));
    $stops: append($stops, $c $current-stop);
}

body:before { /* or some other element*/
  content: '';
  height: 5px;
  display: block;
  background: linear-gradient(to right, $stops);
}

Output:

body:before {
  content: '';
  height: 5px;
  display: block;
  background: linear-gradient(to right, #C3E279 0%, #C3E279 14.28571%, #F7FEC8 14.28571%, #F7FEC8 28.57143%, #FFD069 28.57143%, #FFD069 42.85714%, #F27669 42.85714%, #F27669 57.14286%, #DC9CBE 57.14286%, #DC9CBE 71.42857%, #C59AE0 71.42857%, #C59AE0 85.71429%, #969DCC 85.71429%, #969DCC 100.0%);
}

http://sassmeister.com/gist/9665cd09dfab6b3e05e0

StackExchange Code Review Q#74522, answer score: 9