LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    
     
    
    Ionic Custom Loading Bar

    
    
  
  
  
    
    
      

Hello!

Loading...
Toggle me to toggle loading!
CSS
.bar.bar-loading {
  display: block;
  height: 24px;
  
  /* starts right below a normal header */
  top: 44px;
  
  /* make the text centered vertically and horizontally */
  text-align: center;
  padding: 0;
  line-height: 24px;

  /* transition 'sliding down' (check below)*/
  -webkit-transition: 200ms all;
}


/* 
 * make the content's top changes animate.
 * might not always look good, but looks
 * good when our loader is added & removed
 */
.has-header {
  -webkit-transition: 200ms top;
}
.has-header.has-loading {
  /* 44px (header) + 24px */
  top: 68px;
}

/* make loading bar slide up/down */
.bar-loading.ng-enter,
.bar-loading.ng-leave.ng-leave-active {
  height: 0;
  border-width: 0px;
}
.bar-loading.ng-enter.ng-enter-active,
.bar-loading.ng-leave {
  height: 24px;
  border-width: 1px;
}
JS
angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', function($scope) {
  $scope.data = {
    isLoading: false
  };
}]);
Host Instantly Drag and Drop Website Builder

 

Description

Example of custom Ionic loading indicator styled as a header bar.
Term
Mon, 11/27/2017 - 21:35

Related Codes

Pen ID
Pen ID
Pen ID