Introduction:
This article explain you about YouTube style progress bar using ngprogress in Angularjs
Description:
ngProgress provides decent and attractive Javascript library to get a nice progress bar similar to the Youtube one. This is very sleek and classy, and it’s very useful for the Single Page Applications.
To implement this we need to write the code like as shown below
You can download ngProgress.js from http://victorbjelkholm.github.io/ngProgress/
Include ngProgress.js ( or ngProgress.min.js) and ngProgress.css in your website.
<!--ng-progress-->
<script src="scripts-ngprogress/build/ngprogress.js"></script>
<link href="scripts-ngprogress/ngProgress.css" rel="stylesheet" />Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/collapsemenu.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts-common/jquery-2.1.4.js"></script>
<script src="scripts-angular/angular.js"></script>
<script src="scripts-angular/angular-route.js"></script>
<!--ng-progress-->
<script src="scripts-ngprogress/build/ngprogress.js"></script>
<link href="scripts-ngprogress/ngProgress.css" rel="stylesheet" />
<script src="scripts-ctrls/ng-main-ctrl.js"></script>
<script src="scripts-ctrls/ng-menu.js"></script>
<script type="text/javascript">
var flag = 0;
$(document).ready(function () {
$('#containerview').css('height', ($(window).height() - 30) + 'px');
$('#containerview').css('width', ($(window).width() - 170) + 'px');
$('#containernavigation').css('height', ($(window).height() - 30) + 'px');
});
var slidedMenuId = "";
function expand(menuid) {
if (slidedMenuId != menuid) {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideDown(400);
slidedMenuId = menuid;
}
else {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideUp(400);
slidedMenuId = "";
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
"use strict";
$('#containernavigation').perfectScrollbar();
});
</script>
<base href="/" />
</head>
<body>
<div class="header">
<div class="header_left">
</div>
<div class="header_middle">
</div>
<div class="header_right">
<div class="header_userinfo_left">
</div>
<div class="header_userinfo_right">
<div class="notification">
</div>
<div class="userphoto_panel">
</div>
<div class="logout">
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div ng-app="myApp" ng-controller="mainController" >
<div id="sliderNavigation" style="border: 0px solid #000;">
<div class="page_container_left font" style="border: 0px solid #000;" id="containernavigation">
<div id="admin_menu" runat="server">
<div id="setting_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('setting_menu')">
<a class="setting_tab">Setting</a>
</div>
<div id="setting_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
<div id="home_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('home_menu')">
<a class="setting_tab">Home</a>
</div>
<div id="home_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
<div id="about_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('about_menu')">
<a class="setting_tab">About</a>
</div>
<div id="about_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
</div>
</div>
<%--Container Pages--%>
<div style="border: 0px solid #000;" id="containerview" class="page_container font">
<div class="col-lg-12 ">
<div class="pagetittle">
: :
<p ng-bind="pagetitle"></p>
</div>
</div>
<div class="col-lg-12 ">
<div ng-view class="content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© 2016 www.logicspark.in All Rights Reserved. The content is copyrighted to Muhammad Asif.
</div>
</body>
</html>
Home.Html :
<div style="margin: auto; width: 50%;">
<h1>
{{home}}</h1>
</div>About.Html:
<div style="margin: auto; width: 50%;">
<h1>
{{about}}</h1>
</div>Contact.Html:
<div style="margin: auto; width: 50%;">
<h1>
{{contact}}</h1>
</div>JavaScript:-
main.js
var myApp = angular.module("myApp", ['ngRoute', 'ngProgress']);
myApp.controller("mainController", function ($scope, $http, $log, ngProgressFactory) {
//ng-view
$scope.$on('$locationChangeStart', function (event) {
$scope.progressbar = ngProgressFactory.createInstance();
$scope.progressbar.start();
$scope.loading = true;
});
$scope.$on('$locationChangeSuccess', function (event) {
// am delaying this 5 sec for demopurpose in real time remove this.
setTimeout(function () {
$scope.progressbar.complete();
}, 2000);
})
});menu.js
myApp.config(function ($routeProvider) {
$routeProvider.
//settings
when('/Home', {
templateUrl: '../Pages/Home.html',
controller: 'homectrl',
}).
when('/About', {
templateUrl: '../Pages/About.html',
controller: 'aboutctrl',
}).
when('/Contact', {
templateUrl: '../Pages/Contact.html',
controller: 'contactctrl',
}).
otherwise({
redirectTo: '/'
});
});
myApp.controller("homectrl", function ($scope) {
$scope.home = 'WelCome to Home Page';
});
myApp.controller("aboutctrl", function ($scope) {
$scope.about = 'WelCome to AboutUS Page';
});
myApp.controller("contactctrl", function ($scope) {
$scope.contact = 'WelCome to ContactUS Page';
});
DEMO
No comments:
Post a Comment