Skip to content

Commit 2570abd

Browse files
cshtml5cshtml5
committed
Add loading indicator
1 parent 395422d commit 2570abd

File tree

3 files changed

+240
-1
lines changed

3 files changed

+240
-1
lines changed

‎OpenSilver.Samples.TelerikUI/OpenSilver.Samples.TelerikUI.Browser/wwwroot/BlazorLoader.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
function onResourceLoaded(resourceIndex, totalResources)
2+
{
3+
document.getElementById("silverlight-loading-percentage").innerHTML = Math.round((resourceIndex / totalResources) * 100) + "%";
4+
}
5+
6+
var i = 0;
7+
var allResourcesBeingLoaded = [];
8+
Blazor.start({ // start manually with loadBootResource
9+
loadBootResource: function (type, name, defaultUri, integrity) {
10+
if (type == "dotnetjs")
11+
return defaultUri;
12+
13+
var fetchResources = fetch(defaultUri, {
14+
cache: 'no-cache',
15+
integrity: integrity,
16+
headers: { 'MyCustomHeader': 'My custom value' }
17+
});
18+
19+
20+
allResourcesBeingLoaded.push(fetchResources);
21+
fetchResources.then((r) => {
22+
i++;
23+
var total = allResourcesBeingLoaded.length;
24+
onResourceLoaded(i, total);
25+
});
26+
return fetchResources;
27+
}
28+
});

‎OpenSilver.Samples.TelerikUI/OpenSilver.Samples.TelerikUI.Browser/wwwroot/index.html

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,37 @@
44
<meta charset="utf-8" />
55
<title>Demo of Telerik UI compiled with OpenSilver</title>
66
<base href="/" />
7+
<link rel="stylesheet" type="text/css" href="silverlight-loading.css">
78
</head>
89
<body>
9-
<app style="position:absolute;">Loading...</app>
10+
<app style="position:absolute;width:100%;height:100%;">
11+
<div class="silverlight-loading-wrapper">
12+
<div class="silverlight-loading">
13+
<div class="silverlight-loading-ball"></div>
14+
<div class="silverlight-loading-ball"></div>
15+
<div class="silverlight-loading-ball"></div>
16+
<div class="silverlight-loading-ball"></div>
17+
<div class="silverlight-loading-ball"></div>
18+
<div class="silverlight-loading-ball"></div>
19+
<div class="silverlight-loading-ball"></div>
20+
<div class="silverlight-loading-ball"></div>
21+
<div class="silverlight-loading-ball"></div>
22+
<div class="silverlight-loading-ball"></div>
23+
<div class="silverlight-loading-ball"></div>
24+
<div class="silverlight-loading-ball"></div>
25+
<div class="silverlight-loading-ball"></div>
26+
<div class="silverlight-loading-ball"></div>
27+
<div class="silverlight-loading-ball"></div>
28+
<div class="silverlight-loading-ball"></div>
29+
<div class="silverlight-loading-percentage-container">
30+
<div id="silverlight-loading-percentage">0%</div>
31+
</div>
32+
</div>
33+
</div>
34+
</app>
1035
<div id="cshtml5-root" style="position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden"></div>
1136
<script src="_framework/blazor.webassembly.js"></script>
1237
<script type="application/javascript" src="libs/opensilver.js"></script>
38+
<script src="BlazorLoader.js"></script>
1339
</body>
1440
</html>

‎OpenSilver.Samples.TelerikUI/OpenSilver.Samples.TelerikUI.Browser/wwwroot/silverlight-loading.css

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
@keyframes silverlight-loading-ball-anim
2+
{
3+
0%
4+
{
5+
transform: translate(-50%, -50%) scale(0);
6+
opacity: 0;
7+
}
8+
9+
25%
10+
{
11+
transform: translate(-50%, -50%) scale(1);
12+
opacity: 1;
13+
}
14+
15+
32%
16+
{
17+
transform: translate(-50%, -50%) scale(0.5);
18+
opacity: 0;
19+
}
20+
21+
100%
22+
{
23+
transform: translate(-50%, -50%) scale(0);
24+
opacity: 0;
25+
}
26+
}
27+
28+
.silverlight-loading-wrapper
29+
{
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
34+
position: relative;
35+
width: 100%;
36+
height: 100%;
37+
}
38+
39+
.silverlight-loading
40+
{
41+
position: relative;
42+
width: 80px;
43+
height: 80px;
44+
45+
pointer-events: none;
46+
}
47+
48+
.silverlight-loading-ball
49+
{
50+
will-change: transform, opacity;
51+
52+
position: absolute;
53+
width: 16%;
54+
height: 16%;
55+
56+
border-radius: 50%;
57+
background: #41afe6;
58+
filter: blur(4px);
59+
opacity: 0;
60+
61+
animation: silverlight-loading-ball-anim 9s infinite;
62+
}
63+
64+
.silverlight-loading-ball:nth-child(1)
65+
{
66+
left: 85.3553390593%;
67+
top: 85.3553390593%;
68+
animation-delay: 0s;
69+
}
70+
71+
.silverlight-loading-ball:nth-child(2)
72+
{
73+
left: 100%;
74+
top: 50%;
75+
animation-delay: 0.2s;
76+
}
77+
78+
.silverlight-loading-ball:nth-child(3)
79+
{
80+
left: 85.3553390593%;
81+
top: 14.6446609407%;
82+
--rotation: calc(-45deg * 3);
83+
animation-delay: 0.4s;
84+
}
85+
86+
.silverlight-loading-ball:nth-child(4)
87+
{
88+
left: 50%;
89+
top: 0%;
90+
animation-delay: 0.6s;
91+
}
92+
93+
.silverlight-loading-ball:nth-child(5)
94+
{
95+
left: 14.6446609407%;
96+
top: 14.6446609407%;
97+
animation-delay: 0.8s;
98+
}
99+
100+
.silverlight-loading-ball:nth-child(6)
101+
{
102+
left: 0%;
103+
top: 50%;
104+
animation-delay: 1.0s;
105+
}
106+
107+
.silverlight-loading-ball:nth-child(7)
108+
{
109+
left: 14.6446609407%;
110+
top: 85.3553390593%;
111+
animation-delay: 1.2s;
112+
}
113+
114+
.silverlight-loading-ball:nth-child(8)
115+
{
116+
left: 50%;
117+
top: 100%;
118+
animation-delay: 1.4s;
119+
}
120+
121+
.silverlight-loading-ball:nth-child(9)
122+
{
123+
left: 50%;
124+
top: 100%;
125+
animation-delay: 4.5s;
126+
}
127+
128+
.silverlight-loading-ball:nth-child(10)
129+
{
130+
left: 14.6446609407%;
131+
top: 85.3553390593%;
132+
animation-delay: 4.7s;
133+
}
134+
135+
.silverlight-loading-ball:nth-child(11)
136+
{
137+
left: 0%;
138+
top: 50%;
139+
animation-delay: 4.9s;
140+
}
141+
142+
.silverlight-loading-ball:nth-child(12)
143+
{
144+
left: 14.6446609407%;
145+
top: 14.6446609407%;
146+
animation-delay: 5.1s;
147+
}
148+
149+
.silverlight-loading-ball:nth-child(13)
150+
{
151+
left: 50%;
152+
top: 0%;
153+
animation-delay: 5.3s;
154+
}
155+
156+
.silverlight-loading-ball:nth-child(14)
157+
{
158+
left: 85.3553390593%;
159+
top: 14.6446609407%;
160+
animation-delay: 5.5s;
161+
}
162+
163+
.silverlight-loading-ball:nth-child(15)
164+
{
165+
left: 100%;
166+
top: 50%;
167+
animation-delay: 5.7s;
168+
}
169+
170+
.silverlight-loading-ball:nth-child(16)
171+
{
172+
left: 85.3553390593%;
173+
top: 85.3553390593%;
174+
animation-delay: 5.9s;
175+
}
176+
177+
.silverlight-loading-percentage-container
178+
{
179+
display: flex;
180+
justify-content: center;
181+
align-items: center;
182+
183+
width: 100%;
184+
height: 100%;
185+
}

0 commit comments

Comments
 (0)