Form Wizard

HTML

<script src="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/js/bootstrap.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
<link rel="stylesheet" href="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class='span12'>
     <h2>Form Wizard</h2>

</div>
<div class='span12'>
    <div id="rootwizard" style="background: #fafafa; padding: 5px;">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul>
                        <li><a href="#tab1" data-toggle="tab">Step 1</a>

                        </li>
                        <li><a href="#tab2" data-toggle="tab">Step 2</a>

                        </li>
                        <li><a href="#tab3" data-toggle="tab">Step 3</a>

                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
        <div id="bar" class="progress progress- active" style="margin-top: -15px">
            <div class="bar"></div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">1</div>
            <div class="tab-pane" id="tab2">2</div>
            <div class="tab-pane" id="tab3">3</div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a>

                </li>
                <li class="previous"><a href="#">Previous</a>

                </li>
                <li class="next last" style="display:none;"><a href="#">Last</a>

                </li>
                <li class="next"><a href="#">Next</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

* {
    -webkit-border-radius: 1 !important;
    -moz-border-radius: 1 !important;
    -ms-border-radius: 1 !important;
    border-radius: 1 !important;
}

JavaScript

$(document).ready(function () {
    $('#rootwizard').bootstrapWizard({
        onTabShow: function (tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('.bar').text($percent.toFixed(0) + '%');
            $('#rootwizard').find('.bar').css({
                width: $percent + '%'
            });
        }
    });
    window.prettyPrint && prettyPrint()
});