Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Image 1.1 : State 1

Image 1.2 : State 2

Jetpack Compose

This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.

🚧

Preview

Code

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    DlSkeleton(
      width: 56,
      height: 56,
      rounded: DlRadiusTokens.roundedFull,
    ),
    const SizedBox(width: DlSpacingTokens.p_16),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          DlSkeleton(
            height: 20,
            rounded: DlRadiusTokens.roundedFull,
          ),
          const SizedBox(height: DlSpacingTokens.p_16),
          DlSkeleton(
            height: 20,
            rounded: DlRadiusTokens.roundedFull,
          ),
        ],
      ),
    ),
  ],
)

Copy

Usage

Add this code example to your project to see how the component works.

DlSkeleton(
    width: 56,
    height: 56,
    rounded: DlRadiusTokens.roundedFull,
)

Copy

API Reference

DlSkeleton is a customizable loading placeholder with animated grey50 to grey100 fade loop, supporting flexible width/height and configurable corner radius.

Prop

Type

Default

width

double

double.infinity

height

double

rounded

double

roundedMd

key