CodePen

HTML

            
              <!doctype HTML>
<html>
  <head>
    <title>Diffbar</title>
  </head>
  <body>

    <div id="bars">
      <div class="difftext">Difficulty:</div>
      <div class="diffbar">
        <div id="lvl-1" class="difflvl lvl-1"></div>
        <div id="lvl-2" class="difflvl lvl-2"></div>
        <div id="lvl-3" class="difflvl lvl-3"></div>
        <div id="lvl-4" class="difflvl lvl-4"></div>
        <div id="lvl-5" class="difflvl lvl-5"></div>
      </div>
</div>
    <div>
      <a href="#lvl-1">push lvl 1</a>
      <a href="#lvl-2">push lvl 2</a>
      <a href="#lvl-3">push lvl 3</a>
      <a href="#lvl-4">push lvl 4</a>
      <a href="#lvl-5">push lvl 5</a>
    </div>
            
          
!

CSS

            
              body {
background: lightgrey;
font-family: arial;
}

#bars {
background: white;
width: 500px;
height: 150px;
margin: 30px 0px 0px 0px;
}

.difftext {
position: relative;
top: 10px;
left: 10px;
}

.diffbar {
background: lightgrey;
width: 300px;
height: 30px;
position: relative;
top: 10px;
left: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}


.difflvl {
position: relative;
right: 290px;
background: darkgrey;
width: 300px;
height: 30px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-transition: right 3s, background 3s;
-moz-transition: right 3s, background 3s;
-0-transition: right 3s, background 3s;
transition: right 3s, background 3s;
}

.diffbar:hover .difflvl {
right: 0px;
}

.diffbar #lvl-1:target {
background: green;
right: 90%;
}

.diffbar #lvl-2:target {
background: aqua;
right: 75%;
}

.diffbar #lvl-3:target {
background: violet;
right: 50%;
}

.diffbar #lvl-4:target {
background: orange;
right: 25%;
}

.diffbar #lvl-5:target {
background: red;
right: 10%;
}

a { margin: 5px }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................