ionic-process-spinner

ionic-process-spinner is an Angular.js and Ionic Framework extension. It provides the ionProcessSpinner directive to show a loading spinner until a process has finished. It replaces the child content with a loading spinner while processing.

Installation

• run bower install ionic-process-spinner
• or run npm install ionic-process-spinner
• or download zip from release page: https://github.com/KillerCodeMonkey/ionic-process-spinner/releases

Demo

Usage

• load ionic, ionic-process-spinner scripts in your index.html
• add dependency to your app module var myAppModule = angular.module('ionicProcessSpinnerTest', ['ionic', 'ionicProcessSpinner']);
• use directive in your html --> ion-content-loader
• <ion-process-spinner css-class="spinner-calm" spinner="crescent" processing="isProcessing"><b>My Content Loader</b></ion-process-spinner>
• the content of the ion-process-spinner element is hidden until the associated processing attribute is false
• during processing is true a loading spinner is shown
• an usecase example: You do not want to block the whole view vie $ionicLoading if a request is processing after a user clicked on a button to send previously filled out inputs. IonProcessSpinner only hides the submit button and shows a loading spinner.

Configuration

• set spinner: spinner="crescent" (optional, default: platform dependent)
• set if processing: processing="isProcessing" (required), a scope variable to switch content with loading spinner
• css-class: css-class="spinner-calm" (optional), a optional css-class to style the spinner