<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container" ng-controller="mainCtrl"> <div class="stepindicator"> </div> <div class="row"> <div class="col-sm-4 col-sm-offset-4"> <div class="panel panel-default"> <div class="panel-body"> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> {{ feedback }} </div> </div> </div> </body> </html>
/*Form Styles*/ .stepindicator { text-align: center; } .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; } .step.active { opacity: 1; } .panel { position:relative; min-height:230px; overflow:hidden; margin-top: 10px; } .disabled { cursor: default; opacity: 0; } /*Animations*/ #myview.ng-enter, #myview.ng-leave { position:absolute; left:30px; right:30px; transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; } #myview.ng-enter { -webkit-animation:slideInRight 0.5s both ease; -moz-animation:slideInRight 0.5s both ease; animation:slideInRight 0.5s both ease; } #myview.ng-leave { -webkit-animation:slideOutLeft 0.5s both ease; -moz-animation:slideOutLeft 0.5s both ease; animation:slideOutLeft 0.5s both ease; } @keyframes slideOutLeft { to { transform: translateX(-200%); } } @-moz-keyframes slideOutLeft { to { -moz-transform: translateX(-200%); } } @-webkit-keyframes slideOutLeft { to { -webkit-transform: translateX(-200%); } } @keyframes slideInRight { from { transform:translateX(200%); } to { transform: translateX(0); } } @-moz-keyframes slideInRight { from { -moz-transform:translateX(200%); } to { -moz-transform: translateX(0); } } @-webkit-keyframes slideInRight { from { -webkit-transform:translateX(200%); } to { -webkit-transform: translateX(0); } }
var myapp = angular.module('myapp', ['ngRoute', 'ngAnimate']); myapp.config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'first.html' }) .when('/second', { templateUrl: 'second.html' }) .when('/third', { templateUrl: 'third.html' }) .otherwise({ redirectTo: '/' }); }); myapp.controller('mainCtrl', function($scope, $location){ $scope.feedback = {}; $scope.submit = function(){ alert('Form Submitted!'); $location.path('/'); $scope.feedback = {}; } $scope.active = function(path){ return ($location.path() === path) ? 'active step' : 'step'; } //directions $scope.gotoFirst = function(){ $location.path('/'); } $scope.gotoSecond = function(){ $location.path('/second'); } $scope.gotoThird = function(){ $location.path('/third'); } });