Blazor.Skeleton 1.0.2

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
The owner has unlisted this package. This could mean that the package is deprecated, has security vulnerabilities or shouldn't be used anymore. 
dotnet add package Blazor.Skeleton --version 1.0.2
                    


                    

                
NuGet\Install-Package Blazor.Skeleton -Version 1.0.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Blazor.Skeleton" Version="1.0.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Blazor.Skeleton" Version="1.0.2" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Blazor.Skeleton" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Blazor.Skeleton --version 1.0.2
                    


                    

                
#r "nuget: Blazor.Skeleton, 1.0.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Blazor.Skeleton@1.0.2
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Blazor.Skeleton&version=1.0.2
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Blazor.Skeleton&version=1.0.2
                    


                            Install as a Cake Tool

ðŸĶī Skeleton.Loading

Skeleton.Loading is a lightweight and fully customizable Blazor component for rendering beautiful skeleton loaders while your content is being fetched or processed.

Perfect for improving UX and providing visual feedback during data loading!

ðŸ“Ķ Installation

1. Install the package

Add the Skeleton.Loading library to your Blazor project using either:

  • NuGet Package Manager
  • Project Reference (if you're working in a shared solution)

2. Add the required CSS reference

In your HTML file:

  • Blazor WebAssembly: wwwroot/index.html
  • Blazor Server: Pages/_Host.cshtml

Add the following line inside the <head> tag:

<link href="_content/Skeleton.Loading/Skelaton.css" rel="stylesheet" />

✅ This step is required to apply skeleton styles to your components.

ðŸ§ą Basic Usage

<SkeletonLoading IsLoading="true" Shape="ShapeType.Circle" Height="40px" Width="40px">
    <img src="avatar.jpg" alt="User Avatar" />
</SkeletonLoading>
  • When IsLoading is true, a loading skeleton is shown.
  • When false, the actual content is rendered.

🔧 Parameters

Parameter Type Description Default
IsLoading bool Whether the skeleton is shown or not —
Shape ShapeType? Shape of the skeleton (Rectangle, Circle, Square) Rectangle
Animation AnimationType? Animation style (Pulse, Wave, Blink) Pulse
Height string? Height of the skeleton placeholder 16px
Width string? Width of the skeleton placeholder 100%
AdditionalStyles string? Inline CSS styles to customize the outer div null
ChildContent RenderFragment? Actual content to display after loading —

ðŸŽĻ Shape Options (ShapeType)

  • Rectangle – Standard block with rounded corners
  • Circle – Perfect for avatars or icons
  • Square – Same width and height, great for tiles

🎞ïļ Animation Options (AnimationType)

  • Pulse – Fades in and out subtly
  • Wave – Horizontal shimmer animation
  • Blink – Quick fade in/out loop

✅ Full Example

<SkeletonLoading 
    IsLoading="@isLoading" 
    Shape="ShapeType.Square" 
    Width="80px" 
    Height="80px" 
    Animation="AnimationType.Blink">

    <div class="actual-content">
        <h4>Welcome Back!</h4>
        <p>This is real content displayed after loading completes.</p>
    </div>

</SkeletonLoading>

📎 Notes

  • Combine multiple SkeletonLoading components to build full-page or card skeletons.
  • Use custom Width/Height or CSS classes for precise layout matching.
  • Works seamlessly with all modern Blazor versions (.NET 6, 7, 8+).

âĪïļ Support the Blazor Community

This component was created with âĪïļ to support the Blazor developer community.

If you like it:

  • ⭐ Star the repository
  • ðŸĪ Contribute with ideas, bug fixes, or enhancements
  • ðŸ“Ģ Share it with other Blazor devs

Made with 💙 for the Blazor ecosystem
Happy Loading! 🎉

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated