Press enter to see results or esc to cancel.

Thêm thanh loading ở đầu trang như YouTube cho Angular

He nhô…. 

Bài viết này mình sẽ hướng dẫn các bác thêm thanh loading ở đầu trang giống YouTube.

Giới Thiệu

loadingbar

Hiện nay thì phong trao làm webapp đang lên cao, có rất rất nhiều công cụ hỗ trợ mình thêm các chức năng cool cool vào webapp. Một trong các cái mình thích nhất là http://chieffancypants.github.io/angular-loading-bar/ . Thấy cái này đẹp mà dễ cài quá, kiểu như tương lai bất cứ cái nào làm bằng angular mình cũng thêm nó vô hết .

Angular Loading Bar

An automatic loading bar using angular interceptors. It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

Có rất nhiều project như vầy rồi nhưng đa số chả có cái nào tự động cả, phải cài đặt lằng nhằng nên bác chieffancypants làm ra repo này cho các bác chỉ down về thêm vài ba dòng là xong rồi. Nó sẽ tự động chạy khi các bác load dữ liệu qua XHR (kiểu load Ajax đấy, chắc vậy )

Link GitHub https://github.com/chieffancypants/angular-loading-bar

Cài đặt

Download qua npm hoặc bower

$ npm install --save angular-loading-bar
$ bower install --save angular-loading-bar

Thêm vào app của các bác

angular.module('myApp', ['angular-loading-bar'])

Include code vào project.

<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>

Okey xong rồi đấy . Mẹ bài gì mà ngắn thế . Thôi viết thêm phần tùy chỉnh nữa vậy.

Tùy chỉnh

Bật tắt cài vòng tròn xoay xoay góc trên bên trái

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = false;
  }])

Bật tắt thanh chạy ngang (Bố mày đọc bài này để cài cái thanh này mà mày bắt tắt )

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeBar = false;
  }])

Thay đổi màu

/* Style của cái thanh
  Thay #F0F3BD bằng màu các bác thích */
#loading-bar .bar {
    background: #F0F3BD;  
}
#loading-bar .peg {
  -moz-box-shadow: #F0F3BD 1px 0 6px 1px;
  -ms-box-shadow: #F0F3BD 1px 0 6px 1px;
  -webkit-box-shadow: #F0F3BD 1px 0 6px 1px;
  box-shadow: #F0F3BD 1px 0 6px 1px;
}
/* Style của cái vòng tròn
  Thay #F0F3BD bằng màu các bác thích */
#loading-bar-spinner .spinner-icon {
  border-top-color:  #F0F3BD;
  border-left-color: #F0F3BD;
}

Thay đổi vị trí của cái thanh

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.parentSelector = '#loading-bar-container'; // Cây DOM mà sẽ chưa cái thanh chạy
    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>'; // HTML của cái cục tròn tròn
  }])

Thiết lập thời gian tối thiểu đệ hiện Loading bar

Bình thường thì request nào lâu hơn 100ms mới hiện cái thanh này

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.latencyThreshold = 500; // Thiết lập thời gian tối thiểu
  }])

Bỏ qua không hiện Loading nữa.

// ignore a particular $http GET:
$http.get('/status', {
  ignoreLoadingBar: true
});

// ignore a particular $http POST.  Note: POST and GET have different
// method signatures:
$http.post('/save', data, {
  ignoreLoadingBar: true
});

Service

Ngoài việc để cho nó chạy tự động thì các bác chỉnh tay cũng được. Inject nó vào controller set giá trị là xong.

angular.module('myApp').controller('myCtrl', function (cfp.loadingBar) {
  cfpLoadingBar.start(); // Thêm cây Loading vào page, hiện 1%
  cfpLoadingBar.inc(); // Chay thêm random %
  cfpLoadingBar.set(0.3); // 30% cho bố
  cfpLoadingBar.status(); // Trả về 0.3
  cfpLoadingBar.complete(); // Cây chạy đến 100% rồi biến mất
});

Kết luận

Theo mình thấy để mặc định rồi chỉnh lại màu là ngon lắm rồi . Cảm ơn các bạn đã đọc bài viết này. Nếu cần chi tiết hơn thì comment hoặc đọc document ở repo đi nhé 

Like
Like Love Haha Wow Sad Angry
Comments

Leave a Comment