Toolbelt.Blazor.LoadingBar 12.0.1

Insert loading bar UI automatically into a client side Blazor application.

Install-Package Toolbelt.Blazor.LoadingBar -Version 12.0.1
dotnet add package Toolbelt.Blazor.LoadingBar --version 12.0.1
<PackageReference Include="Toolbelt.Blazor.LoadingBar" Version="12.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Toolbelt.Blazor.LoadingBar --version 12.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Blazor WebAssembly (client-side) LoadingBar NuGet Package

Summary

This is a class library that inserts loading bar UI automatically into a client side Blazor WebAssembly application.

movie.1

This is a porting from angular-loading-bar (except spinner UI).

Any HTTP requests to servers from HttpClient will cause appearing loading bar effect if the request takes over 100 msec.

The live demo site is here:

Supported Blazor versions

"Blazor WebAssembly App (client-side) LoadingBar" ver.12.x supports Blazor WebAssembly App version 3.2 Preview 2~5, Release Candidates, and 3.2 Final Release!

How to install and use?

Step.1 Install the library via NuGet package, like this.

>  dotnet add package Toolbelt.Blazor.LoadingBar

Step.2 Register "LoadingBar" service into the DI container, and declare construct loading bar UI, at Main() method in the Program class of your Blazor application.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Open namespace, and...
...
public class Program
{
  public static async Task Main(string[] args)
  {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");
    builder.Services.AddLoadingBar(); // <-- register the service, and...
    ...

    await builder
        .Build()
        .UseLoadingBar() // <!-- declare construct loading bar UI.
        .RunAsync();
    ...

Step.3 Add invoking EnableIntercept(IServiceProvider) extension method at the registration of HttpClient to DI container.

public class Program
{
  public static async Task Main(string[] args)
  {
    ...
    builder.Services.AddScoped(sp => new HttpClient { 
      BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
    }.EnableIntercept(sp)); // <- Add this!
    ...

That's all.

After doing those 3 step, you can see a loading bar effect on your Blazor application UI, during HttpClient request going on.

Configuration

The calling of AddLoadingBar() and UseLoadingBar() injects the references of JavaScript file (.js) and style sheet file (.css) - which are bundled with this package - into your page automatically.

If you don't want this behavior, you can disable these automatic injections, please call AddLoadingBar() with configuration action like this:

builder.Services.AddLoadingBar(options =>
{
  // If you don't want automatic injection of js file, add below;
  options.DisableClientScriptAutoInjection = true;

  // If you don't want automatic injection of css file, add bllow;
  options.DisableStyleSheetAutoInjection = true;
});

You can inject those helper files manually. The URLs are below:

  • .js file - _content/Toolbelt.Blazor.LoadingBar/script.min.js
  • .css file - _content/Toolbelt.Blazor.LoadingBar/style.min.css

Credits

Credit goes to chieffancypants for his great works angular-loading-bar.

This library includes many codes, style sheet definition, and algorithms derived from angular-loading-bar.

Release Notes

Release notes is here.

License

Mozilla Public License Version 2.0

Blazor WebAssembly (client-side) LoadingBar NuGet Package

Summary

This is a class library that inserts loading bar UI automatically into a client side Blazor WebAssembly application.

movie.1

This is a porting from angular-loading-bar (except spinner UI).

Any HTTP requests to servers from HttpClient will cause appearing loading bar effect if the request takes over 100 msec.

The live demo site is here:

Supported Blazor versions

"Blazor WebAssembly App (client-side) LoadingBar" ver.12.x supports Blazor WebAssembly App version 3.2 Preview 2~5, Release Candidates, and 3.2 Final Release!

How to install and use?

Step.1 Install the library via NuGet package, like this.

>  dotnet add package Toolbelt.Blazor.LoadingBar

Step.2 Register "LoadingBar" service into the DI container, and declare construct loading bar UI, at Main() method in the Program class of your Blazor application.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Open namespace, and...
...
public class Program
{
  public static async Task Main(string[] args)
  {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");
    builder.Services.AddLoadingBar(); // <-- register the service, and...
    ...

    await builder
        .Build()
        .UseLoadingBar() // <!-- declare construct loading bar UI.
        .RunAsync();
    ...

Step.3 Add invoking EnableIntercept(IServiceProvider) extension method at the registration of HttpClient to DI container.

public class Program
{
  public static async Task Main(string[] args)
  {
    ...
    builder.Services.AddScoped(sp => new HttpClient { 
      BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
    }.EnableIntercept(sp)); // <- Add this!
    ...

That's all.

After doing those 3 step, you can see a loading bar effect on your Blazor application UI, during HttpClient request going on.

Configuration

The calling of AddLoadingBar() and UseLoadingBar() injects the references of JavaScript file (.js) and style sheet file (.css) - which are bundled with this package - into your page automatically.

If you don't want this behavior, you can disable these automatic injections, please call AddLoadingBar() with configuration action like this:

builder.Services.AddLoadingBar(options =>
{
  // If you don't want automatic injection of js file, add below;
  options.DisableClientScriptAutoInjection = true;

  // If you don't want automatic injection of css file, add bllow;
  options.DisableStyleSheetAutoInjection = true;
});

You can inject those helper files manually. The URLs are below:

  • .js file - _content/Toolbelt.Blazor.LoadingBar/script.min.js
  • .css file - _content/Toolbelt.Blazor.LoadingBar/style.min.css

Credits

Credit goes to chieffancypants for his great works angular-loading-bar.

This library includes many codes, style sheet definition, and algorithms derived from angular-loading-bar.

Release Notes

Release notes is here.

License

Mozilla Public License Version 2.0

Release Notes

v.12.0.1
- Fix: it throws an unhandled exception when HttpClient is registered as a scoped service.
v.12.0.0
- BREAKING CHANGE: Support Blazor v.3.2.0 Preview 5 style HttpClient DI container registration.
v.11.0.0
- BREAKING CHANGE: Support Blazor v.3.2.0 Preview 2 (not compatible with v.3.2.0 Preview 1 or before.)
v.10.0.0
- BREAKING CHANGE: Support Blazor v.3.2.0 Preview 1 (not compatible with v.3.1.0 Preview 4 or before.)
v.9.0.0
- BREAKING CHANGE: Support Blazor v.3.1.0 Preview 4 (not compatible with v.3.1.0 Preview 3 or before.)
v.8.0.0
- BREAKING CHANGE: Support Blazor v.3.1.0 Preview 3 (not compatible with v.3.1.0 Preview 2 or before.)
v.7.0.0
- BREAKING CHANGE: Support Blazor v.3.0.0 Preview 9 (not compatible with v.3.0.0 Preview 8 or before.)
v.6.0.0
- BREAKING CHANGE: Support Blazor v.3.0.0 Preview 6 (not compatible with v.3.0.0 Preview 5 or before.)
v.5.0.0
- BREAKING CHANGE: Support Blazor v.3.0.0 Preview 4 (not compatible with v.0.9.0 or before.)
v.4.0.0
- BREAKING CHANGE: Support Blazor v.0.9.0 (not compatible with v.0.8.0 or before.)
v.3.0.0
- BREAKING CHANGE: Support Blazor v.0.8.0 (not compatible with v.0.7.0 or before.)
v.2.1.0
- Support Blazor v.0.6.0 - it was signed strong name.
v.2.0.0
- BREAKING CHANGE: Fix namespace of LoadingBarExtension class.
v.1.0.0
- 1st release.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on Toolbelt.Blazor.LoadingBar:

Repository Stars
enkodellc/blazorboilerplate
Blazor Boilerplate / Starter Template with MatBlazor

Version History

Version Downloads Last updated
12.0.1 2,359 7/22/2020
12.0.0 6,106 4/25/2020
11.0.0.1 1,901 3/12/2020
10.0.0 3,773 1/29/2020
9.0.0.3 1,019 1/12/2020
8.0.0 1,967 11/20/2019
7.0.0 2,113 9/5/2019
6.0.0 1,066 6/14/2019
5.0.0 299 4/26/2019
4.0.0 240 3/9/2019
3.0.0 190 2/8/2019
2.1.0 848 10/3/2018
2.0.0 219 9/21/2018
1.0.0 241 9/15/2018