How to create a circle shaped profile meter for a registration form

Question

I have a form called registration.html. I want to include a percentage profile meter. The profile meter should change percentage completed like 10%, 20% completed and so on depending upon the fields entered by the user. I want to do it using html, javascript, css.

Thanks

Answer 1

Something like LinkedIn is:

 function fillMeter(percent) { var pixels = (percent/100) * 90; $(".fill").css('top', (90-pixels) + "px"); $(".fill").css('height', pixels + "px"); } fillMeter(40); 

 .fill { position: absolute; left: 0; width: 90px; background-color: green; overflow:hidden; } .mask { display: block; height: 90px; left: 0; position: absolute; top: 0; width: 90px; overflow:hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="position:relative;"> <div class="fill"></div> <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img> </div> 

To change the percentage call fillMeter(55) for 55% etc. Show below:

 function fillMeter(percent) { var pixels = (percent/100) * 90; $(".fill").css('top', (90-pixels) + "px"); $(".fill").css('height', pixels + "px"); } fillMeter(55); 

 .fill { position: absolute; left: 0; width: 90px; background-color: green; overflow:hidden; } .mask { display: block; height: 90px; left: 0; position: absolute; top: 0; width: 90px; overflow:hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="position:relative;"> <div class="fill"></div> <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img> </div> 

Working JSFiddle: http://jsfiddle.net/5aufgL8o/1/

Answer 2

Here is my answer:

http://cssdeck.com/labs/full/bwxqiw1z

 $("#calculate-form").click(function(e) { // calculate total number of inputs var numberInputsTotal = $("input").size(); // find all input values that are not empty var inputsEmpty = $('input:not([value!=""])') var numberInputsFilled = numberInputsTotal - inputsEmpty.size(); alert(numberInputsFilled); // calculate width var width = (100/numberInputsTotal) * numberInputsFilled; // set width $("#fill-form .fill").css({'width': width + '%', 'height':'20', 'background': 'red'}); e.preventDefault(); }); 

  width: 100%; } #container div#fill-form { position: relative; width: 200px; height: 20px; border: 1px solid grey; border-radius: 3px; margin: 10px; background: yellow; } #container div#fill-form .fill { display: inline-block; position: relative; } #container div.form { display: block; padding: 10px; } #container div.calculate { padding: 10px; } #container div.calculate a { text-decoration: none; color: #fff; background: #116adf; padding: 7px 15px; border-radius: 3px; transition: .5s; } #container div.calculate a:hover { opacity: .8; } #container label { width: 100%; display: block; margin-bottom: 5px; } #container input { display: block; } 

 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div id="container"> <div id="fill-form"> <div class="fill"></div> </div> <div class="form"> <label for="name">Name:</label> <input name="name" type="text" value="" placeholder="Your Name" /> </div> <div class="form"> <label for="lastname">Lastname:</label> <input name="lastname" type="text" value="" placeholder="Your Lastname"/> </div> <div class="form"> <label for="email">E-mail:</label> <input name="email" type="email" value="" placeholder="Your E-mail"/> </div> <div class="form"> <label for="username">Username:</label> <input name="username" type="text" value="" placeholder="Your Username"/> </div> <div class="form"> <label for="password">Password:</label> <input name="password" type="text" value="" placeholder="Your Password"/> </div> <div class="calculate"> <a id="calculate-form" href="">Calculate</a> </div> </div> 

For best results i would recommend to just copy and paste all the code inserted here into a new html file and make the test on that file. Seems like the codeplayer integrated with SO isnt functioninig properly.