CodePen

HTML

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

    <div id="bars">
<div class="difftext">Difficulty:</div>
<div class="diffbar">
<div class="difflvl"></div>
</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

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;
background: crimson;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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