Programming Steps: 215 Ionic-v1 Custom Loading Bar: Nightly

Friday, June 2, 2017

215 Ionic-v1 Custom Loading Bar: Nightly

Custom Loading Bar: Nightly
code example:

<html ng-app="ionicApp"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Custom Loading Bar</title>

/* 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;
}
  
  </style>
  </head>
  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello!</h1>
    </ion-header-bar>
    <div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
      Loading...
    </div>
    <ion-content ng-class="{'has-loading': data.isLoading}">
      <ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
    </ion-content>
<script>
angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', function($scope) {
  $scope.data = {
    isLoading: false
  };
}]);  
    </script>
  </body>
</html>

https://codepen.io/ionic/pens/public/

201706,20170602