Hi , Now i am going to explain about create progress bar for form filling using html, css, jquery . This Progress bar is Really help for customer Easily know how much they completed form till now and how much remains.
Progression.js is a jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled). It uses the data attributes for storing the tips, has options for customizing the tooltip and can be implemented into any form so easily.
Index.html:
<html>
<head>
<title>Form Progress view</title>
<style>
#myform{
width:300px;
margin: 0 auto;
background-color:#F1FEF2;
padding:25px;
border-radius:5px;
border:1px solid #093;
}
label{
display:block;
}
input,textarea{
width:100%;
height:35px;
border-radius:5px;
border:1px solid #093;
}
</style>
<link href='progression.min.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("#myform").progression({
tooltipWidth: '200',
tooltipPosition: 'right',
tooltipOffset: '50',
showProgressBar: true,
showHelper: true,
tooltipFontSize: '14',
tooltipFontColor: 'fff',
progressBarBackground: 'fff',
progressBarColor: '6EA5E1',
tooltipBackgroundColor:'a2cbfa',
tooltipPadding: '10',
tooltipAnimate: true
});
});
</script>
</head>
<body>
<form id="myform">
<h2> Form Progress View:</h2>
<p>
<label for="">First Name</label>
<input data-progression type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="">
</p>
<p>
<label for="">Last Name</label>
<input data-progression type="text" data-helper="Tracks users progress when filling in forms" name="email" value="" placeholder="">
</p>
<p class="left">
<label for="">Email</label>
<input data-progression type="text" data-helper="The tooltip is fully customisable" name="mytel" value="" placeholder="">
</p>
<p class="right">
<label for="">Age</label>
<input data-progression type="text" data-helper="And can be positioned left or right" name="mytel" value="" placeholder="">
</p>
<p>
<label for="">Telephone Number</label>
<textarea data-progression name="" data-helper="Either the helper text or progress bar can be turned off"></textarea>
</p>
<p>
<input type="submit" class="button" name="" value="Submit" placeholder="">
</p>
</form>
</body>
</html>
progression.css
.percent {
display: block;color: #fff;font - size: 12 px;margin - left: 5 px;height: auto;position: absolute;top: 2 px; margin-top:-9px;
}
.triangle_right
{
width: 0;height: 0;border - style: solid;border - width: 7.5 px 10 px 7.5 px 0;border - color: transparent rgba(255, 255, 255, .3) transparent transparent;display: block;position: absolute;left: -10 px;top: 10 px
}
.triangle_left
{
width: 0;height: 0;border - style: solid;border - width: 7.5 px 0 7.5 px 10 px;border - color: transparent transparent transparent rgba(255, 255, 255, .3);display: block;position: absolute;right: -10 px;top: 10 px
}
.tooltip p
{
color: white;margin - bottom: 10 px;font - size: 14 px
}
.percentagebarinner
{
width: 0;background: #FFF;height: 20 px;background: #6ea5e1;position:relative}
.percentagebar
{
width:100%;position:relative;background:# FFF;height: 20 px
}
0 Comments