Skip to content

Commit d7f0ea4

Browse files
gvreddy04gvreddy04
authored
Spinner component (#553)
* Spinner component
1 parent 4e4b776 commit d7f0ea4

28 files changed

+477
-6
lines changed

‎BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
</ItemGroup>
2121

2222
<ItemGroup>
23+
<Folder Include="Pages\Spinner\" />
2324
<Folder Include="Pages\ScriptLoader\" />
2425
</ItemGroup>
2526

‎BlazorBootstrap.Demo.RCL/Pages/Index.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,11 @@
170170
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar</h4>
171171
</a>
172172
</div>
173+
<div class="col-sm-4 mb-2">
174+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/spinner">
175+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowRepeat" class="me-2" /> Spinner <Badge Color="BadgeColor.Danger">New</Badge></h4>
176+
</a>
177+
</div>
173178
<div class="col-sm-4 mb-2">
174179
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/switch">
175180
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ToggleOn" class="me-2" /> Switch</h4>

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@page "/spinner"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Spinner</h1>
8+
<div class="lead mb-3">
9+
Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component.
10+
</div>
11+
12+
@* <CarbonAds /> *@
13+
14+
<SectionHeading Size="HeadingSize.H2" Text="Border spinner" PageUrl="@pageUrl" HashTagName="border-spinner" />
15+
<div class="mb-3">Use the border spinners for a lightweight loading indicator.</div>
16+
<Demo Type="typeof(Spinner_Demo_01_Border_Spinner)" />
17+
18+
<SectionHeading Size="HeadingSize.H2" Text="Colors" PageUrl="@pageUrl" HashTagName="colors" />
19+
<div class="mb-3">
20+
The border spinner's border color inherits the element's color (<code>currentColor</code>). This means you can easily customize the spinner's color by changing the <code>Color</code> parameter on the standard spinner.
21+
</div>
22+
<Demo Type="typeof(Spinner_Demo_02_Colors)" />
23+
24+
<SectionHeading Size="HeadingSize.H2" Text="Grow spinner" PageUrl="@pageUrl" HashTagName="grow-spinner" />
25+
<div class="mb-3">
26+
If you don't fancy a border spinner, switch to the grow spinner, while it doesn't technically spin, it does repeatedly grow!
27+
</div>
28+
<Demo Type="typeof(Spinner_Demo_03_Grow_spinner_A)" />
29+
<Demo Type="typeof(Spinner_Demo_03_Grow_spinner_B)" />
30+
31+
<SectionHeading Size="HeadingSize.H2" Text="Loading dots spinner" PageUrl="@pageUrl" HashTagName="loading-dots-spinner" />
32+
<div class="mb-3">The loading dots are a special indicator for a lightweight loading indicator.</div>
33+
<Demo Type="typeof(Spinner_Demo_04_Loading_dots_spinner_A)" />
34+
<Demo Type="typeof(Spinner_Demo_04_Loading_dots_spinner_B)" />
35+
36+
<SectionHeading Size="HeadingSize.H2" Text="Alignment" PageUrl="@pageUrl" HashTagName="alignment" />
37+
<SectionHeading Size="HeadingSize.H2" Text="Margin" PageUrl="@pageUrl" HashTagName="margin" />
38+
<Demo Type="typeof(Spinner_Demo_05_Alignment_A_Margin)" />
39+
40+
<SectionHeading Size="HeadingSize.H2" Text="Placement" PageUrl="@pageUrl" HashTagName="placement" />
41+
<SectionHeading Size="HeadingSize.H2" Text="Flex" PageUrl="@pageUrl" HashTagName="flex" />
42+
<Demo Type="typeof(Spinner_Demo_05_Alignment_B_Palcement_Flex_01)" />
43+
<Demo Type="typeof(Spinner_Demo_05_Alignment_B_Palcement_Flex_02)" />
44+
45+
<SectionHeading Size="HeadingSize.H2" Text="Floats" PageUrl="@pageUrl" HashTagName="floats" />
46+
<Demo Type="typeof(Spinner_Demo_05_Alignment_C_Palcement_Floats)" />
47+
48+
<SectionHeading Size="HeadingSize.H2" Text="Text align" PageUrl="@pageUrl" HashTagName="text-align" />
49+
<Demo Type="typeof(Spinner_Demo_05_Alignment_D_Palcement_Text_align)" />
50+
51+
<SectionHeading Size="HeadingSize.H2" Text="Size" PageUrl="@pageUrl" HashTagName="size" />
52+
<Demo Type="typeof(Spinner_Demo_06_Size_A_Border)" />
53+
<Demo Type="typeof(Spinner_Demo_06_Size_B_Grow)" />
54+
<Demo Type="typeof(Spinner_Demo_06_Size_C_Dots)" />
55+
56+
<SectionHeading Size="HeadingSize.H2" Text="Visible" PageUrl="@pageUrl" HashTagName="visible" />
57+
<Demo Type="typeof(Spinner_Demo_07_Visible)" />
58+
59+
@code{
60+
private string pageUrl = "/spinner";
61+
private string title = "Blazor Spinner Component";
62+
private string description = "Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component.";
63+
private string imageUrl = "https://i.imgur.com/273TamX.png"; // TODO: update this
64+
}

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Border_Spinner.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<Spinner />

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_02_Colors.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Spinner Color="SpinnerColor.Primary" />
2+
<Spinner Color="SpinnerColor.Secondary" />
3+
<Spinner Color="SpinnerColor.Success" />
4+
<Spinner Color="SpinnerColor.Danger" />
5+
<Spinner Color="SpinnerColor.Warning" />
6+
<Spinner Color="SpinnerColor.Info" />
7+
<Spinner Color="SpinnerColor.Light" />
8+
<Spinner Color="SpinnerColor.Dark" />

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_A.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<Spinner Type="SpinnerType.Grow" />

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_B.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Primary" />
2+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Secondary" />
3+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Success" />
4+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Danger" />
5+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Warning" />
6+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Info" />
7+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Light" />
8+
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Dark" />

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_A.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<Spinner Type="SpinnerType.Dots" />

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Primary" />
2+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Secondary" />
3+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Success" />
4+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Danger" />
5+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Warning" />
6+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Info" />
7+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Light" />
8+
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Dark" />

‎BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_A_Margin.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<Spinner Type="SpinnerType.Border" Class="m-5" />

0 commit comments

Comments
 (0)