<!-- Navbar for Wizard Starts -->
<ul class="wizard-navbar">
        <div class="liner"></div>

        <li class="active flex-fill">
            <a [ngClass]="(page==='Personal')?'nav-link active':'nav-link'" uiSrefActive="active" uiSref="personal" data-toggle="tab"
                title="personal">
                <span class="round-tabs one">
                    <i class="icon-user"></i>
                </span>
            </a>
        </li>
        <li class="flex-fill">
            <a [ngClass]="(page==='Work')?'nav-link active':'nav-link'" uiSrefActive="active" uiSref="work" data-toggle="tab" title="work">
                <span class="round-tabs two">
                    <i class="icon-briefcase"></i>
                </span> 
            </a>
        </li>
        <li class="flex-fill">
            <a [ngClass]="(page==='Address')?'nav-link active':'nav-link'" uiSrefActive="active" uiSref="address" data-toggle="tab" title="address">
                <span class="round-tabs three">
                    <i class=" icon-location-pin"></i>
                </span>
            </a>
        </li>
        <li class="flex-fill">
            <a [ngClass]="(page==='Result')?'nav-link active':'nav-link'" uiSrefActive="active" uiSref="result" data-toggle="tab" title="completed">
                <span class="round-tabs four">
                    <i class="icon-cursor"></i>
                </span>
            </a>
        </li>
</ul>
<!-- Navbar for Wizard Ends -->