AnonymousRoot
Node Operator
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Getting Started
I've used CDN for Bootstrap, Font-awesome and Angular JS so you need internet connection for them to work.
The idea of loader is that when ever a certain event occurred, the loader will show. In this case of this tutorial, we're going to show the loader using ng-show on button click event.
index.html
This is our index which contains our buttons and loaders. In this tutorial, I have two loaders, one is font-awesome spinner and the second one is a .gif image.
angular.js
Lastly, this contains our Angular JS code.
That ends this tutorial. Happy Coding :)
Download
I've used CDN for Bootstrap, Font-awesome and Angular JS so you need internet connection for them to work.
The idea of loader is that when ever a certain event occurred, the loader will show. In this case of this tutorial, we're going to show the loader using ng-show on button click event.
index.html
This is our index which contains our buttons and loaders. In this tutorial, I have two loaders, one is font-awesome spinner and the second one is a .gif image.
- <!DOCTYPE html>
- <html
lang
=
"en"
ng-app=
"app"
>
- <head
>
- <meta
charset
=
"utf-8"
>
- <title
>
AngularJS How to Create a Loader</
title
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel
=
"stylesheet"
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel
=
"stylesheet"
>
- <script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
></
script
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
- </
head
>
- <body
ng-controller=
"myController"
>
- <div
class
=
"container"
>
- <h1
class
=
"page-header text-center"
>
AngularJS How to Create a Loader</
h1
>
- <div
class
=
"row text-center"
>
- <h2
>
Using Font-awesome Spinner</
h2
>
- <button
class
=
"btn btn-primary"
ng-click=
"showLoader()"
>
{{ loadName }} <i
class
=
"fa fa-spinner fa-pulse"
ng-show=
"fontloader"
></
i
></
button
>
- <button
class
=
"btn btn-warning"
ng-click=
"stopLoader()"
>
Stop</
button
>
- </
div
>
- <hr
>
- <div
class
=
"row text-center"
>
- <h2
>
Using .gif Image with $timeout</
h2
>
- <button
class
=
"btn btn-primary"
ng-click=
"showImgLoader()"
>
{{ gifName }}</
button
>
- <button
class
=
"btn btn-warning"
ng-click=
"stopImgLoader()"
>
Stop</
button
>
- </
div
>
- <div
class
=
"row text-center"
>
- <img
src
=
"loader.gif"
ng-show=
"imgloader"
>
- </
div
>
- </
div
>
- <script
src
=
"angular.js"
></
script
>
- </
body
>
- </
html
>
angular.js
Lastly, this contains our Angular JS code.
- var
app =
angular.module
(
'app'
,
[
]
)
;
- app.controller
(
'myController'
,
function
(
$scope,
$http,
$timeout)
{
- $scope.loadName
=
'Save'
;
- $scope.gifName
=
'Save'
;
- //for font
- $scope.showLoader
=
function
(
)
{
- $scope.fontloader
=
true
;
- $scope.loadName
=
'Saving...'
;
- }
- $scope.stopLoader
=
function
(
)
{
- $scope.fontloader
=
false
;
- $scope.loadName
=
'Save'
;
- }
- //for img
- $scope.showImgLoader
=
function
(
)
{
- $scope.imgloader
=
true
;
- $scope.gifName
=
'Saving...'
;
- $timeout(
function
(
)
{
- $scope.stopImgLoader
(
)
;
- }
,
5000
)
;
- }
- $scope.stopImgLoader
=
function
(
)
{
- $scope.imgloader
=
false
;
- $scope.gifName
=
'Save'
;
- }
- }
)
;
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view the hidden content.