Blazor.FlexLoader 1.4.0

Blazor.FlexLoader

<div align="center"> <img src="./assets/icon-github.svg" alt="Blazor.FlexLoader" width="128" height="128" /> <h3>Un composant Blazor flexible pour les indicateurs de chargement</h3> </div>

Francais | English

Francais

Un composant Blazor flexible et reutilisable pour afficher des indicateurs de chargement avec support pour des images personnalisees, du texte et du contenu custom. Inclut un SVG anime par defaut !

Fonctionnalites

• SVG anime par defaut - Aucune configuration requise !
• Indicateur de chargement global pour les applications Blazor
• Support d'images personnalisees (GIF, SVG, PNG, etc.)
• Texte de chargement personnalisable
• Contenu custom avec RenderFragment
• Positionnement absolu ou fixe
• Couleurs et styles personnalisables
• Fermeture automatique configurable
• Fermeture au clic sur l'overlay
• Compatible .NET 9
• CI/CD automatise avec GitHub Actions

Installation

dotnet add package Blazor.FlexLoader

Configuration

1. Enregistrer le service dans Program.cs

using Blazor.FlexLoader.Extensions;

builder.Services.AddBlazorFlexLoader();

2. Ajouter les imports dans _Imports.razor

@using Blazor.FlexLoader.Components
@using Blazor.FlexLoader.Services

3. Ajouter le composant dans votre layout

<FlexLoader />

C'est tout ! Le loader affichera automatiquement un SVG anime professionnel.

Utilisation

Methodes simples Show/Close

@inject LoaderService LoaderService

<button @onclick="ShowLoader">Afficher le loader</button>

@code {
    private async Task ShowLoader()
    {
        LoaderService.Show(); // Affiche le SVG anime par defaut
        
        try
        {
            await SomeAsyncOperation();
        }
        finally
        {
            LoaderService.Close(); // Masque le loader
        }
    }
}

Loader par defaut vs personnalise

<FlexLoader />


<FlexLoader ImagePath="/images/custom-loader.gif" />


<FlexLoader>
    <CustomContent>
        <div class="spinner-border" role="status"></div>
    </CustomContent>
</FlexLoader>

Methodes Increment/Decrement (gestion avancee)

LoaderService.Increment(); // Compter +1
LoaderService.Decrement(); // Compter -1
LoaderService.Reset();     // Forcer fermeture

Parametres du composant

API du LoaderService

public class LoaderService
{
    public bool IsLoading { get; }
    
    // Methodes simples
    public void Show();       // Afficher
    public void Close();      // Masquer
    
    // Methodes avancees
    public void Increment();  // Compter +1
    public void Decrement();  // Compter -1
    public void Reset();      // Forcer fermeture
    
    public event EventHandler? OnChange;
}

Licence

MIT

English

A flexible and reusable Blazor component for displaying loading indicators with support for custom images, text, and custom content. Includes animated SVG by default!

Features

• Built-in animated SVG - Zero configuration required!
• Global loading indicator for Blazor applications
• Support for custom images (GIF, SVG, PNG, etc.)
• Customizable loading text
• Custom content with RenderFragment
• Absolute or fixed positioning
• Customizable colors and styles
• Configurable auto-close
• Close on overlay click
• Compatible with .NET 9
• Automated CI/CD with GitHub Actions

Installation

dotnet add package Blazor.FlexLoader

Setup

1. Register the service in Program.cs

using Blazor.FlexLoader.Extensions;

builder.Services.AddBlazorFlexLoader();

2. Add imports in _Imports.razor

@using Blazor.FlexLoader.Components
@using Blazor.FlexLoader.Services

3. Add the component to your layout

<FlexLoader />

That's it! The loader will automatically display a professional animated SVG.

Usage

Simple Show/Close methods

@inject LoaderService LoaderService

<button @onclick="ShowLoader">Show loader</button>

@code {
    private async Task ShowLoader()
    {
        LoaderService.Show(); // Shows the default animated SVG
        
        try
        {
            await SomeAsyncOperation();
        }
        finally
        {
            LoaderService.Close(); // Hide the loader
        }
    }
}

Default vs Custom loader

<FlexLoader />


<FlexLoader ImagePath="/images/custom-loader.gif" />


<FlexLoader>
    <CustomContent>
        <div class="spinner-border" role="status"></div>
    </CustomContent>
</FlexLoader>

Increment/Decrement methods (advanced management)

LoaderService.Increment(); // Count +1
LoaderService.Decrement(); // Count -1
LoaderService.Reset();     // Force close

Component Parameters

LoaderService API

public class LoaderService
{
    public bool IsLoading { get; }
    
    // Simple methods
    public void Show();       // Display
    public void Close();      // Hide
    
    // Advanced methods
    public void Increment();  // Count +1
    public void Decrement();  // Count -1
    public void Reset();      // Force close
    
    public event EventHandler? OnChange;
}

License

MIT