Loading Skeleton

The modern alternative to a spinner: a card-shaped skeleton of muted bars that keeps your layout stable while OnVisible collections load. Toggle it with a simple varLoading flag.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

YAML source

# Loading Skeleton — PowerBlocks (FREE)
# Show while data loads: set Visible to your loading flag, e.g.
#   OnVisible:  Set(varLoading, true); ClearCollect(...); Set(varLoading, false)
#   Visible:    =varLoading   (leave =true while designing)

- LoadingSkeleton:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =420
      Height: =180
      Fill: =RGBA(23, 23, 23, 1)
      BorderColor: =RGBA(64, 64, 64, 1)
      BorderThickness: =1
      RadiusTopLeft: =16
      RadiusTopRight: =16
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      DropShadow: =DropShadow.None
      Visible: =true
    Children:
      - SkAvatar:
          Control: Circle
          Properties:
            X: =20
            Y: =20
            Width: =44
            Height: =44
            Fill: =RGBA(55, 65, 81, 1)
      - SkBar1:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            X: =80
            Y: =24
            Width: =220
            Height: =14
            Fill: =RGBA(55, 65, 81, 1)
            RadiusTopLeft: =7
            RadiusTopRight: =7
            RadiusBottomLeft: =7
            RadiusBottomRight: =7
            DropShadow: =DropShadow.None
      - SkBar2:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            X: =80
            Y: =46
            Width: =140
            Height: =12
            Fill: =RGBA(31, 41, 55, 1)
            RadiusTopLeft: =6
            RadiusTopRight: =6
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            DropShadow: =DropShadow.None
      - SkLine1:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            X: =20
            Y: =92
            Width: =Parent.Width - 40
            Height: =12
            Fill: =RGBA(31, 41, 55, 1)
            RadiusTopLeft: =6
            RadiusTopRight: =6
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            DropShadow: =DropShadow.None
      - SkLine2:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            X: =20
            Y: =114
            Width: =Parent.Width - 40
            Height: =12
            Fill: =RGBA(31, 41, 55, 1)
            RadiusTopLeft: =6
            RadiusTopRight: =6
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            DropShadow: =DropShadow.None
      - SkLine3:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            X: =20
            Y: =136
            Width: =(Parent.Width - 40) * 0.6
            Height: =12
            Fill: =RGBA(31, 41, 55, 1)
            RadiusTopLeft: =6
            RadiusTopRight: =6
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            DropShadow: =DropShadow.None

Related states components

FREE

Empty State

FREE

Error State

FREE

Info Banner