Skip to content

Commit 9cc1292

Browse files
linkdotnetlinkdotnet
committed
Introduced Loading Component
1 parent a3f4682 commit 9cc1292

File tree

2 files changed

+64
-1
lines changed

2 files changed

+64
-1
lines changed

‎LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="page">
1414
@if (BlogPost == null)
1515
{
16-
<h3>Loading...</h3>
16+
<Loading></Loading>
1717
}
1818
else
1919
{
@@ -58,6 +58,7 @@
5858

5959
protected override async Task OnInitializedAsync()
6060
{
61+
await Task.Delay(10000);
6162
BlogPost = await blogPostRepository.GetByIdAsync(BlogPostId);
6263
}
6364

‎LinkDotNet.Blog.Web/Shared/Loading.razor

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<div>
2+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
3+
<g transform="rotate(0 50 50)">
4+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
5+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9285714285714286s" repeatCount="indefinite"></animate>
6+
</rect>
7+
</g><g transform="rotate(25.714285714285715 50 50)">
8+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
9+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8571428571428571s" repeatCount="indefinite"></animate>
10+
</rect>
11+
</g><g transform="rotate(51.42857142857143 50 50)">
12+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
13+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7857142857142857s" repeatCount="indefinite"></animate>
14+
</rect>
15+
</g><g transform="rotate(77.14285714285714 50 50)">
16+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
17+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7142857142857143s" repeatCount="indefinite"></animate>
18+
</rect>
19+
</g><g transform="rotate(102.85714285714286 50 50)">
20+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
21+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6428571428571429s" repeatCount="indefinite"></animate>
22+
</rect>
23+
</g><g transform="rotate(128.57142857142858 50 50)">
24+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
25+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5714285714285714s" repeatCount="indefinite"></animate>
26+
</rect>
27+
</g><g transform="rotate(154.28571428571428 50 50)">
28+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
29+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
30+
</rect>
31+
</g><g transform="rotate(180 50 50)">
32+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
33+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.42857142857142855s" repeatCount="indefinite"></animate>
34+
</rect>
35+
</g><g transform="rotate(205.71428571428572 50 50)">
36+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
37+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.35714285714285715s" repeatCount="indefinite"></animate>
38+
</rect>
39+
</g><g transform="rotate(231.42857142857142 50 50)">
40+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
41+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2857142857142857s" repeatCount="indefinite"></animate>
42+
</rect>
43+
</g><g transform="rotate(257.14285714285717 50 50)">
44+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
45+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.21428571428571427s" repeatCount="indefinite"></animate>
46+
</rect>
47+
</g><g transform="rotate(282.85714285714283 50 50)">
48+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
49+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.14285714285714285s" repeatCount="indefinite"></animate>
50+
</rect>
51+
</g><g transform="rotate(308.57142857142856 50 50)">
52+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
53+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.07142857142857142s" repeatCount="indefinite"></animate>
54+
</rect>
55+
</g><g transform="rotate(334.2857142857143 50 50)">
56+
<rect x="44" y="13" rx="6" ry="6" width="12" height="12" fill="var(--button-primary-color)">
57+
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
58+
</rect>
59+
</g>
60+
</svg>
61+
<h1 class="text-center">Getting latest information</h1>
62+
</div>

0 commit comments

Comments
 (0)