Progress bar below menu for each link
===

Im looking for help to create a menu like this [This is the menu i want][1]


  [1]: http://piccsy.com/investors/

It can be done with Javascript or Jquery?

I did a menu like this with html and css but it's not the same as the website.

I have 2 optiones 

this is the 1st code but the problem is if i click on other thing of the website it looses the progress bar...

    body {
     	padding: 10em 0 0;
    }
    .ui-menu {
    	width: 37em;
    	padding: 0;
    	text-align: center;
    }
    .ui-menu a {
     	width: 4em;
     	margin: 0 .15em;
     	padding: .1em .35em;
     	display: inline-block;
     	background: #f7f7f7;
     	font: 17px "Arial Narrow", sans-serif;
     	text-align: center;
     	text-decoration: none;
    }
    .ui-menu a:focus {
    	outline: none;
    }
    .ui-menu-bottom-line {
     	width: 35em;
     	height: 1px;
     	margin: 1em auto;
     	background: #d7d7d7
     		linear-gradient(left, #d82126 50%, transparent 50%) no-repeat;
     	background-size: 5em;
     	transition: 1s;	
    }
    .ui-menu a:nth-child(2):focus ~ .ui-menu-bottom-line,
    .ui-menu a:nth-child(2):active ~ .ui-menu-bottom-line {
     	background-size: 15em;
    }
    .ui-menu a:nth-child(3):focus ~ .ui-menu-bottom-line,
    .ui-menu a:nth-child(3):active ~ .ui-menu-bottom-line {
     	background-size: 25em;
    }
    .ui-menu a:nth-child(4):focus ~ .ui-menu-bottom-line,
    .ui-menu a:nth-child(4):active ~ .ui-menu-bottom-line {
     	background-size: 35em;
    }
    .ui-menu a:nth-child(5):focus ~ .ui-menu-bottom-line,
    .ui-menu a:nth-child(5):active ~ .ui-menu-bottom-line {
     	background-size: 45em;
    }
    .ui-menu a:nth-child(6):focus ~ .ui-menu-bottom-line,
    .ui-menu a:nth-child(6):active ~ .ui-menu-bottom-line {
     	background-size: 55em;
    }
    .ui-menu a:nth-child(7):focus ~ .ui-menu-bottom-line,
    .ui-menu a:nth-child(7):active ~ .ui-menu-bottom-line {
     	background-size: 65em;
    }

and HTML :

    <div class="ui-menu">
	<a class="goto-frame" href="#" tabindex="1">Welcome</a><a class="goto-frame" href="#" tabindex="1">Problem</a><a class="goto-frame" href="#solution" tabindex="1">
	Solution</a><a class="goto-frame" href="#team" tabindex="1">Team</a><a class="goto-frame" href="#traction" tabindex="1">Traction
	</a><a class="goto-frame" href="#product" tabindex="1">Product</a><a class="goto-frame" href="#contact" tabindex="1">Contact</a>
	<div class="ui-menu-bottom-line"></div>
</div>


SECOND CODE:

    body {
     	padding: 10em 0 0;
    }
    .ui-menu {
    	width: 37em;
    	padding: 0;
    	font: 17px "Arial Narrow", sans-serif;
    	text-align: center;
    }
    .ui-menu input[type=radio] { display: none; }
    .ui-menu label {
     	width: 4em;
     	margin: 0;
     	padding: .1em .5em;
     	display: inline-block;
     	text-align: center;
    }
    .ui-menu-bottom-line {
     	width: 35em;
     	height: 1px;
     	margin: 1em auto;
     	background: #d7d7d7
     		linear-gradient(left, #d82126 50%, transparent 50%) no-repeat;
     	background-size: 5em;
     	transition: 1s;
    }
    .ui-menu #welcome:checked ~ .ui-menu-bottom-line {
     	background-size: 5em;
    }
    .ui-menu #problem:checked ~ .ui-menu-bottom-line {
     	background-size: 15em;
    }
    .ui-menu #solution:checked ~ .ui-menu-bottom-line {
     	background-size: 25em;
    }
    .ui-menu #team:checked ~ .ui-menu-bottom-line {
     	background-size: 35em;
    }
    .ui-menu #traction:checked ~ .ui-menu-bottom-line {
     	background-size: 45em;
    }
    .ui-menu #product:checked ~ .ui-menu-bottom-line {
     	background-size: 55em;
    }
    .ui-menu #contact ~ .ui-menu-bottom-line {
     	background-size: 65em;
    }


AND THE HTML:

    <div class="ui-menu">
	<input type="radio" name="mi" id="welcome">
	<label class="goto-frame" for="welcome">Welcome</label>
	<input type="radio" name="mi" id="problem">
	<label class="goto-frame" for="problem">Problem</label>
	<input type="radio" name="mi" id="solution">
	<label class="goto-frame" for="solution">Solution</label>
	<input type="radio" name="mi" id="team">
	<label class="goto-frame" for="team">Team</label>
	<input type="radio" name="mi" id="traction">
	<label class="goto-frame" for="traction">Traction</label>
	<input type="radio" name="mi" id="product">
	<label class="goto-frame" for="product">Product</label>
	<input type="radio" name="mi" id="contact">
	<label class="goto-frame" for="contact">Contact</label>
	<div class="ui-menu-bottom-line"></div>
</div>


How can i do a menu like piccsy.com/investors ??  Javascript? Jquery? HTML+CSS??

Thank you all in advance.