How to create step by step progress bar in visualforce page
There will be rquirement to show progress after completing each step for example while creating resume in job portals,we find step by step progress bar.In order to do that,I am posting the sample code.
<apex:page><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
function setProgress(progress)
{
var progressBarWidth =progress*$(".container").width()/ 100;
$(".progressbar").width(progressBarWidth).html(progress + "% ");
}
</script>
<style>
.container{
width: 300px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
display:inline-block;
margin:0px 10px 5px 5px;
vertical-align:top;
}
</style>
<body>
<div class="container"><div class="progressbar" style="color: #fff;text-align: right;height: 25px;width: 0;background-color: #0ba1b5;
border-radius: 3px; " >test</div></div>
<div onclick="setProgress(80);">testing</div>
</body>
</apex:page>
Note:1)In order to change progress just change width i.e argument to setProgress() .for example
setProgress(10),seProgress(20) etc.
2)Must include jquery library files.
Hope U Enjoy..
No comments:
Post a Comment