Ionic Process Spinner

Ionic Process Spinner

ionProcessSpinner directive replaces content with a loading spinner while processing

$0.00

Bengt Weiße

Bengt Weiße

Member since 2014

Details

Version:
0.0.1
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
6 years ago
Updated:
6 years ago
Category:
Plugins
Tags:
,

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

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