css wizard progress

Demo illustrating CSS arrow stylings for showing progression to the user

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-include="'menu.html'"></div>
<div ui-view="main" class="container"></div>

<script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">Our Menu</span>
            </div>
        </div>
    </nav>
</script>

<script type="text/ng-template" id="state1.html">
    <div class="container">
        <div class="wizard small row ng-cloak" ng-cloak>
            <a ng-repeat="state in...

CSS

/* wizard with arrows */
.nomargin {
    padding: 0 !important;
    margin: 0 !important;
}

.wizard {
    background-color: white;
    padding: 0.2em 0em 0.2em 0.2em;
}

    .wizard a {
        padding: 20px 12px 20px;
        position: relative;
        display: inline-block;
        text-decoration: none;
        min-width: 24.75%;
        margin-left: 3px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        color: #FFFFFF;
        background: #8BBFE6;
        text-transform: uppercase;
        cursor: pointer;
    }

        .wizard a:hover {
            text-decoration: none;
        }

        .wizard a:first-child {
            margin-left: 0;
        }

    .wizard:not(.left-arrow) a:before {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #FFFFFF;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
    }


    .wizard:not(.left-arrow) a:after {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #8BBFE6;
        position: absolute;
        content: "";
        top: 0;
        right: -30px;
        z-index: 2;
    }

    .wizard.left-arrow a:before {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-right: 30px solid #8BBFE6;
        position: absolute;
        content: "";
        top: 0;
        left: -30px;
        z-index: 2;
    }

    .wizard.left-arrow a:after {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-right: 30px solid #FFFFFF;
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        z-index: 2;
    }

    .wizard a:first-child:before,
  ...

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.controllers', []);
    angular.module('myApp.directives', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var state1Ctrl = function ($filter) {
        var
            vm = this,
            init = function () {
                vm.states.length = 0;
                for (var i = 0; i < vm.stateCount; i++) {
                    vm.states.push({ name: 'Step ' + (i + 1).toString(), heading: 'Step ' + (i + 1).toString(), isVisible: true });
                }
            };
        vm.stateCountChange = function () {
            vm.stateCount = isNaN(vm.stateCount) ? 2 : vm.stateCount;
            init();
        };
        
        vm.setCurrent = function(state) {
            for (var i=0; i < vm.states.length; i++)
            {
                vm.states[i].isCurrent = false;
            }
            state.isCurrent = true;
        };

        vm.states = [];
        vm.stateCount = 2;
        init();
    };

    state1Ctrl.$inject = ['$filter'];
    angular.module('myApp.controllers')
        .controller('state1Ctrl', state1Ctrl);

    myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',

    function ($locationProvider, $stateProvider, $urlRouterProvider) {

        $locationProvider.html5Mode(false);

        $urlRouterProvider.when('/', '/state1')
            .otherwise("/state1");

        $stateProvider.state('app', {
            abstract: true,
            url: '/',
            views: {
                'main': {
                    template: '<div ui-view>/div>'
                }
            }
        })
        .state('app.state1', {
            url: 'state1',
            templateUrl: 'state1.html',
            controller: 'state1Ctrl',
            controllerAs:...