aitboudad/ngx-loading-bar

🚀 Thanh tiến trình tự động 0 cấu hình cho Angular

@ngx-loading-bar — tự động hiển thị loading bar cho mọi request HTTP và navigation, không cần viết thêm code.

Nguyễn Bảo Đạt xây dựng @ngx-loading-bar — một thư viện Angular hiển thị thanh tiến trình tự động trên toàn bộ ứng dụng, không cần cấu hình thủ công. Thư viện tự động theo dõi các request qua @angular/common/http và việc chuyển route qua @angular/router, hiển thị thanh loading ngay khi có hoạt động mạng và ẩn đi khi hoàn tất. Hỗ trợ Angular từ phiên bản 7 trở lên với các phiên bản tương ứng.

✨ Điểm nổi bật

• Zero configuration: Tự động gắn vào HTTP client và Router mà không cần viết interceptor hay guard thủ công.
• 3 package riêng biệt: core để quản lý thủ công, http-client cho request, router cho navigation — chỉ import cái cần dùng.
• Customizable: Điều chỉnh màu sắc, chiều cao thanh, đường kính spinner, hiển thị/ẩn spinner hoặc thanh riêng biệt.
• Bật/tắt theo request: Sử dụng HttpContext hoặc routerLink state để bỏ qua một số request nhất định (ví dụ long-polling, debug).
• Multi loading bar: Hỗ trợ nhiều thanh loading riêng biệt cho từng nguồn (http, router, ...).
• Global config: Thiết lập latencyThreshold để trì hoãn hiển thị thanh loading, tránh flicker cho request nhanh.
• Material Progress bar integration: Tích hợp trực tiếp với Angular Material Progress Bar.
• Standalone component: Hỗ trợ Angular standalone component, không cần module truyền thống.

💡 Vì sao đáng chú ý

Hầu hết thanh loading bar cho Angular yêu cầu người dùng tự viết interceptor, quản lý state, và gắn vào template thủ công. @ngx-loading-bar loại bỏ toàn bộ boilerplate đó — chỉ cần gọi provideLoadingBarInterceptor() hoặc provideLoadingBarRouter() trong app config, thêm <ngx-loading-bar> vào template, và xong. Mọi thứ còn lại hoạt động tự động.

Thư viện phù hợp cho bất kỳ ứng dụng Angular nào cần feedback trực quan trong quá trình tải dữ liệu hoặc chuyển trang. Việc chia nhỏ thành 3 package (core, http-client, router) giúp project chỉ kéo dependency cần thiết, tránh phình kích thước bundle.

#Angular #LoadingBar #Progressbar #TiniX