SkeletonFor 1.0.0

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package SkeletonFor --version 1.0.0
                    


                    

                
NuGet\Install-Package SkeletonFor -Version 1.0.0
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="SkeletonFor" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="SkeletonFor" Version="1.0.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="SkeletonFor" />
                    


                            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 SkeletonFor --version 1.0.0
                    


                    

                
#r "nuget: SkeletonFor, 1.0.0"
#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 SkeletonFor@1.0.0
#: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=SkeletonFor&version=1.0.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=SkeletonFor&version=1.0.0
                    


                            Install as a Cake Tool

ðŸĶī SkeletonFor

SkeletonFor is a 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 SkeletonFor library to your Blazor project using either:

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

ðŸ§ą Basic Usage

<Skeleton IsLoading="true" Shape="ShapeType.Circle" Height="50px" Width="50px">
     <img src="https://i.pravatar.cc/50" style="border-radius:50px" />
</Skeleton>
  • 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

@using SkeletonFor.Components

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

    <img src="https://i.pravatar.cc/100" style="border-radius:50px" />

</Skeleton>


@code {
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(1000);
        isLoading = false;
    }
}

📎 Notes

  • Combine multiple SkeletonFor 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
1.0.0 202 4/16/2025