Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 50 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,61 @@
# Getting Started with the Blazor Skeleton Component

A quick start Blazor project that shows how to add a Blazor Skeleton component to the Blazor WebAssembly App. This project also includes a code snippet to add a Card layout and customize the Skeleton component using the properties Shape, CssClass and Effect.

Refer to the following documentation to learn about the Blazor Skeleton component: https://blazor.syncfusion.com/documentation/skeleton/getting-started

Check out this online example of the Blazor Skeleton component: : https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities?theme=fluent
The [Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples) is a modern data-loading indicator which shows a preview of how the page is going to be displayed with shimmer effect when data is loaded. A quick start Blazor project that shows how to add a Blazor Skeleton component to the Blazor WebAssembly App. This project also includes a code snippet to add a Card layout and customize the Skeleton component using the properties Shape, CssClass and Effect.

Watch the following video to get started with a Blazor Web Assembly app and add Syncfusion Blazor components to it: https://www.youtube.com/watch?v=zKU580cOqjg

## Project prerequisites

Make sure that you have the compatible versions of [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/ ) and [.NET Core SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or later version in your machine before starting to work on this project.
Make sure that you have the compatible versions of [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/) and [.NET Core SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or later version in your machine before starting to work on this project.

## How to run this application

To run this application, you need to first clone the getting-started-with-the-blazor-skeleton-component repository and then open it in Visual Studio 2022. Now, simply build and run your project to view the output.

## Features and Benefits

### Customization

The appearance of Blazor Skeleton can be customized by changing the wave color, background, width, and height.

### Built-in shimmer effects

Blazor Skeleton supports wave, fade, and pulse [shimmer effects](https://blazor.syncfusion.com/documentation/skeleton/effects?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples).

### Built-in shapes

Use built-in [shapes](https://blazor.syncfusion.com/documentation/skeleton/shapes?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples) in Blazor Skeleton to create a preview of any layout.

## Related links
[Learn More about Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Download Free Trial](https://www.syncfusion.com/downloads/blazor?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Documentation](https://blazor.syncfusion.com/documentation/skeleton/getting-started?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-blazor-skeleton-component?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Community Forums](https://www.syncfusion.com/forums/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Online example](https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities?theme=bootstrap5?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

[Video Tutorials](https://www.syncfusion.com/tutorial-videos/blazor/skeleton?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)

## About Syncfusion Blazor Components
The Syncfusion's [Blazor Components](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples) library offers over 80 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Skeleton, we provide popular Blazor Components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Charts](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), and [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples).

### About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:sales@syncfusion.com?Subject=Syncfusion Blazor Skeleton - GitHub" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=blazor-skeleton-github-samples">www.syncfusion.com</a>| Toll Free: 1-888-9 DOTNET <br>
</p>