Angular Multi-step Form/Page animation

UI made easy with Angular Directive

Example #1

Create your account

Setup your social profile

Subscription Settings

Personal Preferences

Example #1-2

Create your account

Setup your social profile

Subscription Settings

Personal Preferences

Example #2

{{currentPage + 1}}

Example #3

{{currentPage + 1}}

Example #4

{{currentPage + 1}}

Example #5 - Horizontal Slide-in

Hello!

Bonjour!

こんにちは!

Olá!

Example #6 - Vertical Slide-in

Question #1

Question #2

Question #3

Question #4

Getting Started

Create page animation in four easy steps!

1. Setup AngularJS on your page

<body ng-app="exampleApp"> <script src="js/lib/jquery-2.1.4.min.js"></script> <script src="js/lib/angular.min.js"></script> <script src="js/page-progress.js"></script> <script> var exampleApp = angular.module('exampleApp', ['csProgress']); exampleApp.controller('example', ['$scope', function($scope) { $scope.currentPage = 0; $scope.movePage = function(offset) { $scope.currentPage += offset; if ($scope.currentPage < 0) $scope.currentPage = 0; if ($scope.currentPage > 3) $scope.currentPage = 3; }; }]); </script> </body>

2. Add your content wrapped inside a container with CSS class cs-page__container

<body ng-app="exampleApp"> <div class="cs-page__container" style="height: 220px" ng-cloak> <div> <!-- Page 1: Your content here --> </div> <div> <!-- Page 2: Your content here --> </div> </div> <script src="js/lib/jquery-2.1.4.min.js"></script> <script src="js/lib/angular.min.js"></script> <script src="js/page-progress.js"></script> <script> var exampleApp = angular.module('exampleApp', ['csProgress']); exampleApp.controller('example', ['$scope', function($scope) { $scope.currentPage = 0; $scope.movePage = function(offset) { $scope.currentPage += offset; if ($scope.currentPage < 0) $scope.currentPage = 0; if ($scope.currentPage > 3) $scope.currentPage = 3; }; }]); </script> </body>

3. Add cs-page directive attribute to enable animation

<body ng-app="exampleApp"> <div class="cs-page__container" style="height: 220px" ng-cloak> <div cs-page="0" page-index="currentPage" page-animation="cs-page__animation-slide"> <!-- Page 1: Your content here --> </div> <div cs-page="1" page-index="currentPage" page-animation="cs-page__animation-slide"> <!-- Page 2: Your content here --> </div> </div> <script src="js/lib/jquery-2.1.4.min.js"></script> <script src="js/lib/angular.min.js"></script> <script src="js/page-progress.js"></script> <script> var exampleApp = angular.module('exampleApp', ['csProgress']); exampleApp.controller('example', ['$scope', function($scope) { $scope.currentPage = 0; $scope.movePage = function(offset) { $scope.currentPage += offset; if ($scope.currentPage < 0) $scope.currentPage = 0; if ($scope.currentPage > 3) $scope.currentPage = 3; }; }]); </script> </body>
Attribute Description
cs-page Page number assigned to the current element, the element will be show when model in page-index matches with this value
page-index Model that contains page index. This value will be compared with value in cs-page to see when to show this element
page-animation (Optional) CSS prefix for animation. E.g. cs-page__animation, cs-page__animation-slide, cs-page__animation-slideup. You can even assign different animation for each pages. (Default: cs-page__animation)

4. (Optional) Add <cs-page-progress> directive tag for progress bar

<body ng-app="exampleApp"> <div class="cs-page__container" style="height: 220px" ng-cloak> <div cs-page="0" page-index="currentPage" page-animation="cs-page__animation-slide"> <!-- Page 1: Your content here --> </div> <div cs-page="1" page-index="currentPage" page-animation="cs-page__animation-slide"> <!-- Page 2: Your content here --> </div> </div> <cs-page-progress page-index="currentPage" page-size="4" show-number="true" labels="['Start', 'Prepare', 'Ready', 'Go']" ></cs-page-progress> <script src="js/lib/jquery-2.1.4.min.js"></script> <script src="js/lib/angular.min.js"></script> <script src="js/page-progress.js"></script> <script> var exampleApp = angular.module('exampleApp', ['csProgress']); exampleApp.controller('example', ['$scope', function($scope) { $scope.currentPage = 0; $scope.movePage = function(offset) { $scope.currentPage += offset; if ($scope.currentPage < 0) $scope.currentPage = 0; if ($scope.currentPage > 3) $scope.currentPage = 3; }; }]); </script> </body>
Attribute Description
page-index Model that contains page index. This value will be compared with value in cs-page to see when to show this element
page-size Total number of pages. The length of the progress bar indicator will be calculated accordingly
show-number (Optional) Whether the progress bar should show a number or not.
labels (Optional - v1.1) Array of text to show as step's label
page-click (Optional) Callback function for click event on number. Only work when show-number is true. 'index' will be pass as its argument, (0 = first page).
class (Optional) cs-page-progress can be easily customized using CSS. Some of the themes are already provided. E.g. cs-pageprogress--thinline, cs-pageprogress--thinline-blue, cs-pageprogress--thinline-royalblue, cs-pageprogress--noborder
bar-width (Optional) If you want to quickly resize the bar without tampering with CSS, you can easily override the default width of the progress bar using this properties. E.g. bar-width="100%" or bar-width="400px"