Toolbelt.Blazor.LoadingBar 9.0.0.3

Blazor WebAssembly (client-side) LoadingBar

Summary

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

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

Supported Blazor versions

"Blazor WebAssembly App (client-side) LoadingBar" ver.9.x supports Blazor WebAssembly App version 3.1 Prevew 4.

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, at ConfigureService method in the Startup class of your Blazor application.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
...
public class Startup
{
  public void ConfigureServices(IServiceCollection services)
  {
    services.AddLoadingBar(); // <- Add this line.
    ...

Step.3 Install "LoadingBar" service to loading bar UI works well, at Configure method in the Startup class of your Blazor application.

public void Configure(IComponentsApplicationBuilder app)
{
  app.UseLoadingBar(); // <- Add this line.
  ...

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 services.AddLoadingBar() and app.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 services.AddLoadingBar() with configuration action like this:

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

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

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

• .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.

Relese Note

• 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.

License

Mozilla Public License Version 2.0