Skip to content

Commit 9aa6bfa

Browse files
phmatrayphmatray
committed
feat: redesign loading screen with new styles and animations
1 parent f472439 commit 9aa6bfa

File tree

2 files changed

+148
-31
lines changed

2 files changed

+148
-31
lines changed

‎Demo.BlazorWasm/wwwroot/css/app.css‎

Lines changed: 114 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -41,38 +41,126 @@
4141
content: "An error has occurred."
4242
}
4343

44-
.loading-progress {
45-
position: relative;
46-
display: block;
47-
width: 8rem;
48-
height: 8rem;
49-
margin: 20vh auto 1rem auto;
50-
}
51-
52-
.loading-progress circle {
53-
fill: none;
54-
stroke: #e0e0e0;
55-
stroke-width: 0.6rem;
56-
transform-origin: 50% 50%;
57-
transform: rotate(-90deg);
58-
}
44+
/* Loading Screen Styles */
45+
.loading-container {
46+
position: fixed;
47+
top: 0;
48+
left: 0;
49+
right: 0;
50+
bottom: 0;
51+
background: #1e1e2e;
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
z-index: 9999;
56+
}
57+
58+
.loading-content {
59+
text-align: center;
60+
animation: fadeIn 0.5s ease-in;
61+
}
62+
63+
.loading-logo {
64+
margin-bottom: 2rem;
65+
animation: pulse 2s ease-in-out infinite;
66+
}
67+
68+
.loading-logo svg {
69+
filter: drop-shadow(0 4px 20px rgba(126, 87, 194, 0.3));
70+
}
71+
72+
.loading-title {
73+
font-size: 2.5rem;
74+
font-weight: 700;
75+
color: #fff;
76+
margin: 0;
77+
letter-spacing: -0.5px;
78+
}
79+
80+
.loading-subtitle {
81+
font-size: 1.1rem;
82+
color: #9e9ea7;
83+
margin: 0.5rem 0 2rem;
84+
font-weight: 300;
85+
}
86+
87+
.loading-spinner {
88+
display: flex;
89+
justify-content: center;
90+
gap: 0.5rem;
91+
margin-bottom: 1.5rem;
92+
}
93+
94+
.spinner-dot {
95+
width: 10px;
96+
height: 10px;
97+
background: #7e57c2;
98+
border-radius: 50%;
99+
animation: bounce 1.4s infinite ease-in-out both;
100+
}
101+
102+
.spinner-dot:nth-child(1) {
103+
animation-delay: -0.32s;
104+
}
59105

60-
.loading-progress circle:last-child {
61-
stroke: #1b6ec2;
62-
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
63-
transition: stroke-dasharray 0.05s ease-in-out;
64-
}
106+
.spinner-dot:nth-child(2) {
107+
animation-delay: -0.16s;
108+
}
65109

66110
.loading-progress-text {
67-
position: absolute;
68-
text-align: center;
69-
font-weight: bold;
70-
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
111+
color: #9e9ea7;
112+
font-size: 0.9rem;
113+
animation: fadeInOut 2s ease-in-out infinite;
114+
}
115+
116+
/* Animations */
117+
@keyframes fadeIn {
118+
from {
119+
opacity: 0;
120+
transform: translateY(10px);
121+
}
122+
to {
123+
opacity: 1;
124+
transform: translateY(0);
125+
}
126+
}
127+
128+
@keyframes pulse {
129+
0% {
130+
transform: scale(1);
131+
}
132+
50% {
133+
transform: scale(1.05);
134+
}
135+
100% {
136+
transform: scale(1);
137+
}
138+
}
139+
140+
@keyframes bounce {
141+
0%, 80%, 100% {
142+
transform: scale(0);
143+
opacity: 0.5;
144+
}
145+
40% {
146+
transform: scale(1);
147+
opacity: 1;
148+
}
71149
}
72150

73-
.loading-progress-text:after {
74-
content: var(--blazor-load-percentage-text, "Loading");
151+
@keyframes fadeInOut {
152+
0%, 100% {
153+
opacity: 0.5;
154+
}
155+
50% {
156+
opacity: 1;
75157
}
158+
}
159+
160+
/* Legacy loading progress (hidden but kept for compatibility) */
161+
.loading-progress {
162+
display: none;
163+
}
76164

77165
code {
78166
color: #c02d76;

‎Demo.BlazorWasm/wwwroot/index.html‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,40 @@
2020

2121
<body>
2222
<div id="app">
23-
<svg class="loading-progress">
24-
<circle r="40%" cx="50%" cy="50%" />
25-
<circle r="40%" cx="50%" cy="50%" />
26-
</svg>
27-
<div class="loading-progress-text">Loading TaLibStandard Demo...</div>
23+
<div class="loading-container">
24+
<div class="loading-content">
25+
<div class="loading-logo">
26+
<svg width="120" height="120" viewBox="0 0 120 120">
27+
<!-- Candlestick chart icon -->
28+
<rect x="20" y="40" width="8" height="30" fill="#4caf50" />
29+
<rect x="22" y="30" width="4" height="50" fill="#4caf50" />
30+
31+
<rect x="40" y="25" width="8" height="45" fill="#f44336" />
32+
<rect x="42" y="20" width="4" height="60" fill="#f44336" />
33+
34+
<rect x="60" y="35" width="8" height="40" fill="#4caf50" />
35+
<rect x="62" y="25" width="4" height="60" fill="#4caf50" />
36+
37+
<rect x="80" y="50" width="8" height="25" fill="#f44336" />
38+
<rect x="82" y="40" width="4" height="45" fill="#f44336" />
39+
40+
<!-- Grid lines -->
41+
<line x1="10" y1="90" x2="100" y2="90" stroke="#e0e0e0" stroke-width="1" />
42+
<line x1="10" y1="70" x2="100" y2="70" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2,2" />
43+
<line x1="10" y1="50" x2="100" y2="50" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2,2" />
44+
<line x1="10" y1="30" x2="100" y2="30" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2,2" />
45+
</svg>
46+
</div>
47+
<h1 class="loading-title">TaLibStandard</h1>
48+
<p class="loading-subtitle">Technical Analysis Library</p>
49+
<div class="loading-spinner">
50+
<div class="spinner-dot"></div>
51+
<div class="spinner-dot"></div>
52+
<div class="spinner-dot"></div>
53+
</div>
54+
<div class="loading-progress-text">Initializing technical indicators...</div>
55+
</div>
56+
</div>
2857
</div>
2958

3059
<div id="blazor-error-ui">

0 commit comments

Comments
 (0)