Skip to content

Commit cdea290

Browse files
LaskewitzLaskewitz
authored
Loading SquidGame (#105)
2 parents 61c2d0c + 1967f40 commit cdea290

File tree

4 files changed

+372
-0
lines changed

4 files changed

+372
-0
lines changed

‎power-apps/loading-squid-game/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Loading Squid Game
2+
3+
This loading screen is inspired by the Squid Game theme—don’t worry, no deadly games while you wait (probably).
4+
5+
![loading-squid-game](./assets/loading-squid-game.gif)
6+
7+
8+
## Authors
9+
10+
Snippet|Author
11+
--------|---------
12+
Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) )
13+
14+
## Minimal path to awesome
15+
16+
1. Open your canvas app in **Power Apps**
17+
2. Copy the contents of the **[YAML-file](./source/loading-squid-game.yaml)**
18+
3. Click on the three dots of the screen where you want to add the snippet and select "Paste code"
19+
4. Update varLoading variable to true (UpdateContext)
20+
21+
22+
## Code
23+
**[YAML-file](./source/loading-squid-game.yaml)**
24+
25+
26+
## Disclaimer
27+
28+
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
29+
30+
<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/loading-squid-game" aria-hidden="true" />

‎power-apps/loading-squid-game/assets/loading-squid-game.gif‎

6.4 MB
Loading

‎power-apps/loading-squid-game/assets/sample.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
[
2+
{
3+
"$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
4+
"name": "pnp-powerplatform-snippets-loading-squid-game",
5+
"version": "1.0.0.0",
6+
"source": "pnp",
7+
"creationDateTime": "2025-08-04T00:00:00.000Z",
8+
"updateDateTime": "2025-08-04T00:00:00.000Z",
9+
"title": "Loading Squid Game",
10+
"shortDescription": "This loading screen is inspired by the Squid Game theme—don’t worry, no deadly games while you wait (probably).",
11+
"longDescription": [
12+
"This loading screen is inspired by the Squid Game theme—don’t worry, no deadly games while you wait (probably)."
13+
],
14+
"url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/loading-squid-game/",
15+
"products": [
16+
"Power Platform",
17+
"Power Apps",
18+
"powerplatform-snippets",
19+
"power-apps-snippets"
20+
],
21+
"tags": [
22+
],
23+
"categories": [
24+
],
25+
"metadata": [
26+
{
27+
"key": "Product",
28+
"value": "Power Apps"
29+
},
30+
{
31+
"key": "Type",
32+
"value": "Snippet"
33+
}
34+
],
35+
"thumbnails": [
36+
{
37+
"type": "image",
38+
"order": 100,
39+
"url": "https://github.com/pnp/powerplatform-snippets/blob/82a7fc112a2a9acb47407dca01395d0aeb04baef/power-apps/loading-squid-game/assets/loading-squid-game.gif",
40+
"alt": "Preview PNG"
41+
}
42+
],
43+
"authors": [
44+
{
45+
"gitHubAccount": "SteveBourdin",
46+
"name": "Steve Bourdin",
47+
"pictureUrl": "https://github.com/SteveBourdin.png"
48+
}
49+
]
50+
}
51+
52+
]

‎power-apps/loading-squid-game/source/loading-squid-game.yaml‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
- cont_loadingSquidGame:
2+
Control: GroupContainer@1.3.0
3+
Variant: ManualLayout
4+
Properties:
5+
ContentLanguage: |-
6+
=//Steve BOURDIN
7+
""
8+
Fill: =RGBA(36,159,156,0.8)
9+
Height: =App.Height
10+
Visible: =varLoading=true
11+
Width: =App.Width
12+
Children:
13+
- cont_loading_item:
14+
Control: GroupContainer@1.3.0
15+
Variant: ManualLayout
16+
Properties:
17+
DropShadow: =DropShadow.Regular
18+
Fill: =RGBA(0, 0, 0, 0.75)
19+
Height: =Parent.Height/2
20+
RadiusBottomLeft: =30
21+
RadiusBottomRight: =30
22+
RadiusTopLeft: =30
23+
RadiusTopRight: =30
24+
Width: =Parent.Width/2
25+
X: =Parent.Width/4
26+
Y: =Parent.Height/4
27+
Children:
28+
- txtMessageLoading:
29+
Control: Text@0.0.51
30+
Properties:
31+
Align: ='TextCanvas.Align'.Center
32+
FontColor: =ColorFade( RGBA(36,159,156,1),varEcart/100)
33+
Height: =Parent.Height/4
34+
Size: =25
35+
Text: ="System loading... Unauthorized movement will be punished."
36+
VerticalAlign: =VerticalAlign.Middle
37+
Width: =Parent.Width
38+
Y: =cont_formes.Height
39+
- cont_formes:
40+
Control: GroupContainer@1.3.0
41+
Variant: ManualLayout
42+
Properties:
43+
DropShadow: =DropShadow.None
44+
Height: =Parent.Height*3/4
45+
Width: =Self.Height
46+
X: =(Parent.Width-Self.Width)/2
47+
Children:
48+
- img_cercle:
49+
Control: Image@2.2.3
50+
Properties:
51+
BorderColor: =RGBA(0, 18, 107, 1)
52+
Height: =Parent.Height
53+
Image: |-
54+
="data:image/svg+xml;utf8," & EncodeUrl("
55+
<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'>
56+
<circle cx='50' cy='50' r='40' fill='none' stroke='#ed1b76' stroke-width='6'/>
57+
</svg>
58+
59+
")
60+
PaddingBottom: =varEcart
61+
PaddingLeft: =varEcart
62+
PaddingRight: =varEcart
63+
PaddingTop: =varEcart
64+
Visible: =varCercle=true
65+
Width: =Parent.Width
66+
- img_triangle:
67+
Control: Image@2.2.3
68+
Properties:
69+
BorderColor: =RGBA(0, 18, 107, 1)
70+
Height: =Parent.Height
71+
Image: |-
72+
="data:image/svg+xml;utf8," & EncodeUrl("
73+
<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'>
74+
<polygon points='50,15 85,85 15,85' fill='none' stroke='#ed1b76' stroke-width='6'/>
75+
</svg>
76+
77+
78+
")
79+
PaddingBottom: =varEcart
80+
PaddingLeft: =varEcart
81+
PaddingRight: =varEcart
82+
PaddingTop: =varEcart
83+
Visible: =varTriangle=true
84+
Width: =Parent.Width
85+
- img_carre:
86+
Control: Image@2.2.3
87+
Properties:
88+
BorderColor: =RGBA(0, 18, 107, 1)
89+
Height: =Parent.Height
90+
Image: |-
91+
="data:image/svg+xml;utf8," & EncodeUrl("
92+
<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'>
93+
<rect x='20' y='20' width='60' height='60' fill='none' stroke='#ed1b76' stroke-width='6'/>
94+
</svg>
95+
96+
97+
")
98+
PaddingBottom: =varEcart
99+
PaddingLeft: =varEcart
100+
PaddingRight: =varEcart
101+
PaddingTop: =varEcart
102+
Visible: =varCarre=true
103+
Width: =Parent.Width
104+
- img_garde:
105+
Control: Image@2.2.3
106+
Properties:
107+
BorderColor: =RGBA(0, 18, 107, 1)
108+
Height: =cont_formes.Height/2
109+
Image: |-
110+
="data:image/svg+xml;utf8," & EncodeUrl(
111+
"
112+
<svg width='200' height='300' viewBox='0 0 200 300' xmlns='http://www.w3.org/2000/svg'>
113+
<!-- Masque noir -->
114+
<circle cx='100' cy='100' r='80' fill='#111' stroke='#333' stroke-width='4' />
115+
116+
<!-- Corps rose -->
117+
<rect x='50' y='180' width='100' height='100' rx='20' fill='#ff007f' />
118+
" & If(
119+
varTriangle,
120+
"
121+
<!-- Triangle blanc sur le masque -->
122+
<polygon points='100,60 80,100 120,100' fill='white' />",
123+
If(
124+
varCarre = true,
125+
"<rect x='85' y='45' width='30' height='30' fill='white' stroke='#ccc' stroke-width='1' />
126+
",
127+
"<circle cx='100' cy='60' r='10' fill='white' />
128+
129+
"
130+
)
131+
) & "
132+
133+
<!-- Yeux (optionnels) -->
134+
<circle cx='80' cy='90' r='5' fill='#000' />
135+
<circle cx='120' cy='90' r='5' fill='#000' />
136+
137+
<!-- Ceinture noire -->
138+
<rect x='50' y='250' width='100' height='10' fill='#000' />
139+
</svg>
140+
"
141+
)
142+
PaddingBottom: =100-varEcart
143+
PaddingLeft: =100-varEcart
144+
PaddingRight: =100-varEcart
145+
PaddingTop: =100-varEcart
146+
Width: =(Parent.Width-cont_formes.Width)/2
147+
Y: =(cont_formes.Height-Self.Height)/2
148+
- img_joueur:
149+
Control: Image@2.2.3
150+
Properties:
151+
BorderColor: =RGBA(0, 18, 107, 1)
152+
Height: =img_garde.Height
153+
Image: |-
154+
="data:image/svg+xml;utf8," & EncodeUrl("
155+
<svg width='200' height='300' viewBox='0 0 200 300' xmlns='http://www.w3.org/2000/svg'>
156+
<!-- Tête -->
157+
<circle cx='100' cy='60' r='30' fill='#fcd5b5' stroke='#333' stroke-width='2' />
158+
159+
<!-- Cheveux en brosse -->
160+
<rect x='75' y='30' width='50' height='10' rx='2' fill='#2b1b0f' />
161+
<rect x='78' y='25' width='4' height='10' fill='#2b1b0f' />
162+
<rect x='84' y='25' width='4' height='10' fill='#2b1b0f' />
163+
<rect x='90' y='25' width='4' height='10' fill='#2b1b0f' />
164+
<rect x='96' y='25' width='4' height='10' fill='#2b1b0f' />
165+
<rect x='102' y='25' width='4' height='10' fill='#2b1b0f' />
166+
<rect x='108' y='25' width='4' height='10' fill='#2b1b0f' />
167+
<rect x='114' y='25' width='4' height='10' fill='#2b1b0f' />
168+
169+
<!-- Yeux -->
170+
<circle cx='90' cy='60' r='4' fill='#000' />
171+
<circle cx='110' cy='60' r='4' fill='#000' />
172+
173+
<!-- Nez -->
174+
<path d='M100,65 Q98,70 100,70 Q102,70 100,65' fill='#dcae96' />
175+
176+
<!-- Bouche -->
177+
<path d='M90,75 Q100,80 110,75' stroke='#a0522d' stroke-width='2' fill='none' />
178+
179+
<!-- Corps vert -->
180+
<rect x='60' y='100' width='80' height='120' rx='20' fill='#006644' stroke='#004d33' stroke-width='2' />
181+
182+
<!-- Bras -->
183+
<rect x='40' y='110' width='20' height='80' rx='10' fill='#006644' />
184+
<rect x='140' y='110' width='20' height='80' rx='10' fill='#006644' />
185+
186+
<!-- Jambes -->
187+
<rect x='70' y='220' width='20' height='60' rx='5' fill='#006644' />
188+
<rect x='110' y='220' width='20' height='60' rx='5' fill='#006644' />
189+
190+
<!-- Numéro sur la poitrine -->
191+
<text x='100' y='160' font-size='20' text-anchor='middle' fill='white' font-family='Arial'>456</text>
192+
</svg>
193+
")
194+
PaddingBottom: =varEcart
195+
PaddingLeft: =varEcart
196+
PaddingRight: =varEcart
197+
PaddingTop: =varEcart
198+
Width: =(Parent.Width-cont_formes.Width)/2
199+
X: =cont_formes.X+cont_formes.Width
200+
Y: =img_garde.Y
201+
- tim_init:
202+
Control: Timer@2.1.0
203+
Properties:
204+
AutoStart: =varLoading=true
205+
BorderColor: =ColorFade(Self.Fill, -15%)
206+
Color: =RGBA(255, 255, 255, 1)
207+
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
208+
DisabledColor: =ColorFade(Self.Fill, 90%)
209+
DisabledFill: =ColorFade(Self.Fill, 70%)
210+
Duration: =600
211+
Fill: =RGBA(56, 96, 178, 1)
212+
Font: =Font.'Open Sans'
213+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
214+
HoverColor: =RGBA(255, 255, 255, 1)
215+
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
216+
OnTimerStart: |-
217+
=UpdateContext({varCercle : true,varTriangle : false,varCarre : false,varAnimation : true,ecart : 0,varSens : 1})
218+
PressedBorderColor: =Self.Fill
219+
PressedColor: =Self.Fill
220+
PressedFill: =Self.Color
221+
Start: =varLoading=true
222+
Visible: =false
223+
X: =40
224+
Y: =40
225+
- tim_animation:
226+
Control: Timer@2.1.0
227+
Properties:
228+
AutoStart: =varLoading=true&&varAnimation=true
229+
BorderColor: =ColorFade(Self.Fill, -15%)
230+
Color: =RGBA(255, 255, 255, 1)
231+
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
232+
DisabledColor: =ColorFade(Self.Fill, 90%)
233+
DisabledFill: =ColorFade(Self.Fill, 70%)
234+
Duration: =60
235+
Fill: =RGBA(56, 96, 178, 1)
236+
Font: =Font.'Open Sans'
237+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
238+
HoverColor: =RGBA(255, 255, 255, 1)
239+
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
240+
OnTimerStart: |-
241+
=If(
242+
varEcart > 100 || varEcart < 0,
243+
If(
244+
varSens = 1,
245+
UpdateContext({varSens: 2}),
246+
UpdateContext({varSens: 1,varEcart : 0});
247+
If(
248+
varCercle,
249+
UpdateContext(
250+
{
251+
varCercle: false,
252+
varTriangle: true
253+
}
254+
),
255+
If(
256+
varTriangle,
257+
UpdateContext(
258+
{
259+
varCarre: true,
260+
varTriangle: false
261+
}
262+
),
263+
UpdateContext(
264+
{
265+
varCercle: true,
266+
varCarre: false
267+
}
268+
)
269+
)
270+
)
271+
)
272+
);
273+
UpdateContext(
274+
{
275+
varEcart: varEcart + If(
276+
varSens = 1,
277+
3,
278+
-3
279+
)
280+
}
281+
);
282+
If(IsBlank(varLoading) , UpdateContext({varLoading : false}))
283+
PressedBorderColor: =Self.Fill
284+
PressedColor: =Self.Fill
285+
PressedFill: =Self.Color
286+
Repeat: =true
287+
Start: =varLoading=true&&varAnimation=true
288+
Visible: =false
289+
X: =60
290+
Y: =60

0 commit comments

Comments
 (0)