LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



	
	
	



	
		
		

{{progressPercent}}%

{{user.name}} Age:{{user.age}}
CSS
.loader {
  background: #f20d49 !important;
  border-radius: 100px;
  height: 20px;
}
.loader p {
  text-align: center;
  color: white !important;
  text-align: center;
}
JS
angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope, $http) {
	$scope.progressPercent = 0
	$scope.users = [{
		name: "Aidan",
		age: 21
	}, {
		name: "Joe",
		age: 45
	}]

	$scope.simulateLoad = function() {
		var interval = setInterval(function() {
			// Increment the value by 1
			$scope.progressPercent++
				if ($scope.progressPercent == 100) {
					clearInterval(interval);
					$scope.addUser()
					$scope.progressPercent = 0
				}
			$scope.$apply()
		}, 20);
	}
	$scope.addUser = function(index) {
		user = {
			name: "new user",
			age: 21
		}
		$scope.users.push(user);
	}

});

Description

I wanted to create a simple progress bar example for ionic this example simulates a user being generated and shows the progress bar while it is working this would be good to implement with image uploading etc. This is also very easy to style in css.
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv