Skip to content

Loading SquidGame #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Loading SquidGame #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82a7fc1
Loading SquidGame
SteveBourdin Aug 4, 2025
1967f40
Update sample.json
SteveBourdin Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions power-apps/loading-squid-game/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Loading Squid Game

This loading screen is inspired by the Squid Game theme—don’t worry, no deadly games while you wait (probably).

![loading-squid-game](./assets/loading-squid-game.gif)


## Authors

Snippet|Author
--------|---------
Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) )

## Minimal path to awesome

1. Open your canvas app in **Power Apps**
2. Copy the contents of the **[YAML-file](./source/loading-squid-game.yaml)**
3. Click on the three dots of the screen where you want to add the snippet and select "Paste code"
4. Update varLoading variable to true (UpdateContext)


## Code
**[YAML-file](./source/loading-squid-game.yaml)**


## Disclaimer

**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.**

<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/loading-squid-game" aria-hidden="true" />
Binary file added power-apps/loading-squid-game/assets/loading-squid-game.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions power-apps/loading-squid-game/assets/sample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
[
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
"name": "pnp-powerplatform-snippets-loading-squid-game",
"version": "1.0.0.0",
"source": "pnp",
"creationDateTime": "2025-08-04T00:00:00.000Z",
"updateDateTime": "2025-08-04T00:00:00.000Z",
"title": "Loading Squid Game",
"shortDescription": "This loading screen is inspired by the Squid Game theme—don’t worry, no deadly games while you wait (probably).",
"longDescription": [
"This loading screen is inspired by the Squid Game theme—don’t worry, no deadly games while you wait (probably)."
],
"url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/loading-squid-game/",
"products": [
"Power Platform",
"Power Apps",
"powerplatform-snippets",
"power-apps-snippets"
],
"tags": [
],
"categories": [
],
"metadata": [
{
"key": "Product",
"value": "Power Apps"
},
{
"key": "Type",
"value": "Snippet"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/powerplatform-snippets/blob/82a7fc112a2a9acb47407dca01395d0aeb04baef/power-apps/loading-squid-game/assets/loading-squid-game.gif",
"alt": "Preview PNG"
}
],
"authors": [
{
"gitHubAccount": "SteveBourdin",
"name": "Steve Bourdin",
"pictureUrl": "https://github.com/SteveBourdin.png"
}
]
}

]
290 changes: 290 additions & 0 deletions power-apps/loading-squid-game/source/loading-squid-game.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,290 @@
- cont_loadingSquidGame:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
ContentLanguage: |-
=//Steve BOURDIN
""
Fill: =RGBA(36,159,156,0.8)
Height: =App.Height
Visible: =varLoading=true
Width: =App.Width
Children:
- cont_loading_item:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.Regular
Fill: =RGBA(0, 0, 0, 0.75)
Height: =Parent.Height/2
RadiusBottomLeft: =30
RadiusBottomRight: =30
RadiusTopLeft: =30
RadiusTopRight: =30
Width: =Parent.Width/2
X: =Parent.Width/4
Y: =Parent.Height/4
Children:
- txtMessageLoading:
Control: Text@0.0.51
Properties:
Align: ='TextCanvas.Align'.Center
FontColor: =ColorFade( RGBA(36,159,156,1),varEcart/100)
Height: =Parent.Height/4
Size: =25
Text: ="System loading... Unauthorized movement will be punished."
VerticalAlign: =VerticalAlign.Middle
Width: =Parent.Width
Y: =cont_formes.Height
- cont_formes:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.Height*3/4
Width: =Self.Height
X: =(Parent.Width-Self.Width)/2
Children:
- img_cercle:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =Parent.Height
Image: |-
="data:image/svg+xml;utf8," & EncodeUrl("
<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='40' fill='none' stroke='#ed1b76' stroke-width='6'/>
</svg>

")
PaddingBottom: =varEcart
PaddingLeft: =varEcart
PaddingRight: =varEcart
PaddingTop: =varEcart
Visible: =varCercle=true
Width: =Parent.Width
- img_triangle:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =Parent.Height
Image: |-
="data:image/svg+xml;utf8," & EncodeUrl("
<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'>
<polygon points='50,15 85,85 15,85' fill='none' stroke='#ed1b76' stroke-width='6'/>
</svg>


")
PaddingBottom: =varEcart
PaddingLeft: =varEcart
PaddingRight: =varEcart
PaddingTop: =varEcart
Visible: =varTriangle=true
Width: =Parent.Width
- img_carre:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =Parent.Height
Image: |-
="data:image/svg+xml;utf8," & EncodeUrl("
<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'>
<rect x='20' y='20' width='60' height='60' fill='none' stroke='#ed1b76' stroke-width='6'/>
</svg>


")
PaddingBottom: =varEcart
PaddingLeft: =varEcart
PaddingRight: =varEcart
PaddingTop: =varEcart
Visible: =varCarre=true
Width: =Parent.Width
- img_garde:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =cont_formes.Height/2
Image: |-
="data:image/svg+xml;utf8," & EncodeUrl(
"
<svg width='200' height='300' viewBox='0 0 200 300' xmlns='http://www.w3.org/2000/svg'>
<!-- Masque noir -->
<circle cx='100' cy='100' r='80' fill='#111' stroke='#333' stroke-width='4' />

<!-- Corps rose -->
<rect x='50' y='180' width='100' height='100' rx='20' fill='#ff007f' />
" & If(
varTriangle,
"
<!-- Triangle blanc sur le masque -->
<polygon points='100,60 80,100 120,100' fill='white' />",
If(
varCarre = true,
"<rect x='85' y='45' width='30' height='30' fill='white' stroke='#ccc' stroke-width='1' />
",
"<circle cx='100' cy='60' r='10' fill='white' />

"
)
) & "

<!-- Yeux (optionnels) -->
<circle cx='80' cy='90' r='5' fill='#000' />
<circle cx='120' cy='90' r='5' fill='#000' />

<!-- Ceinture noire -->
<rect x='50' y='250' width='100' height='10' fill='#000' />
</svg>
"
)
PaddingBottom: =100-varEcart
PaddingLeft: =100-varEcart
PaddingRight: =100-varEcart
PaddingTop: =100-varEcart
Width: =(Parent.Width-cont_formes.Width)/2
Y: =(cont_formes.Height-Self.Height)/2
- img_joueur:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =img_garde.Height
Image: |-
="data:image/svg+xml;utf8," & EncodeUrl("
<svg width='200' height='300' viewBox='0 0 200 300' xmlns='http://www.w3.org/2000/svg'>
<!-- Tête -->
<circle cx='100' cy='60' r='30' fill='#fcd5b5' stroke='#333' stroke-width='2' />

<!-- Cheveux en brosse -->
<rect x='75' y='30' width='50' height='10' rx='2' fill='#2b1b0f' />
<rect x='78' y='25' width='4' height='10' fill='#2b1b0f' />
<rect x='84' y='25' width='4' height='10' fill='#2b1b0f' />
<rect x='90' y='25' width='4' height='10' fill='#2b1b0f' />
<rect x='96' y='25' width='4' height='10' fill='#2b1b0f' />
<rect x='102' y='25' width='4' height='10' fill='#2b1b0f' />
<rect x='108' y='25' width='4' height='10' fill='#2b1b0f' />
<rect x='114' y='25' width='4' height='10' fill='#2b1b0f' />

<!-- Yeux -->
<circle cx='90' cy='60' r='4' fill='#000' />
<circle cx='110' cy='60' r='4' fill='#000' />

<!-- Nez -->
<path d='M100,65 Q98,70 100,70 Q102,70 100,65' fill='#dcae96' />

<!-- Bouche -->
<path d='M90,75 Q100,80 110,75' stroke='#a0522d' stroke-width='2' fill='none' />

<!-- Corps vert -->
<rect x='60' y='100' width='80' height='120' rx='20' fill='#006644' stroke='#004d33' stroke-width='2' />

<!-- Bras -->
<rect x='40' y='110' width='20' height='80' rx='10' fill='#006644' />
<rect x='140' y='110' width='20' height='80' rx='10' fill='#006644' />

<!-- Jambes -->
<rect x='70' y='220' width='20' height='60' rx='5' fill='#006644' />
<rect x='110' y='220' width='20' height='60' rx='5' fill='#006644' />

<!-- Numéro sur la poitrine -->
<text x='100' y='160' font-size='20' text-anchor='middle' fill='white' font-family='Arial'>456</text>
</svg>
")
PaddingBottom: =varEcart
PaddingLeft: =varEcart
PaddingRight: =varEcart
PaddingTop: =varEcart
Width: =(Parent.Width-cont_formes.Width)/2
X: =cont_formes.X+cont_formes.Width
Y: =img_garde.Y
- tim_init:
Control: Timer@2.1.0
Properties:
AutoStart: =varLoading=true
BorderColor: =ColorFade(Self.Fill, -15%)
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
DisabledColor: =ColorFade(Self.Fill, 90%)
DisabledFill: =ColorFade(Self.Fill, 70%)
Duration: =600
Fill: =RGBA(56, 96, 178, 1)
Font: =Font.'Open Sans'
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
OnTimerStart: |-
=UpdateContext({varCercle : true,varTriangle : false,varCarre : false,varAnimation : true,ecart : 0,varSens : 1})
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
Start: =varLoading=true
Visible: =false
X: =40
Y: =40
- tim_animation:
Control: Timer@2.1.0
Properties:
AutoStart: =varLoading=true&&varAnimation=true
BorderColor: =ColorFade(Self.Fill, -15%)
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
DisabledColor: =ColorFade(Self.Fill, 90%)
DisabledFill: =ColorFade(Self.Fill, 70%)
Duration: =60
Fill: =RGBA(56, 96, 178, 1)
Font: =Font.'Open Sans'
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
OnTimerStart: |-
=If(
varEcart > 100 || varEcart < 0,
If(
varSens = 1,
UpdateContext({varSens: 2}),
UpdateContext({varSens: 1,varEcart : 0});
If(
varCercle,
UpdateContext(
{
varCercle: false,
varTriangle: true
}
),
If(
varTriangle,
UpdateContext(
{
varCarre: true,
varTriangle: false
}
),
UpdateContext(
{
varCercle: true,
varCarre: false
}
)
)
)
)
);
UpdateContext(
{
varEcart: varEcart + If(
varSens = 1,
3,
-3
)
}
);
If(IsBlank(varLoading) , UpdateContext({varLoading : false}))
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
Repeat: =true
Start: =varLoading=true&&varAnimation=true
Visible: =false
X: =60
Y: =60