@contentful/f36-skeleton NPM

title: 'Skeleton' slug: /components/skeleton/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/skeleton' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-skeleton--basic'

typescript: ./src/SkeletonBodyText/SkeletonBodyText.tsx,./src/SkeletonContainer/SkeletonContainer.tsx,./src/SkeletonDisplayText/SkeletonDisplayText.tsx,./src/SkeletonImage/SkeletonImage.tsx,./src/SkeletonRow/SkeletonRow.tsx

Skeleton is used to display a loading state in components.

Import

import { Skeleton } from '@contentful/f36-components';
// or
import { Skeleton } from '@contentful/f36-skeleton';

How to use Skeleton

Compound components of Skeleton are: Container, BodyText, DisplayText, Image, Row.
Use the Skeleton.Container to control color, background color, animation, opacity of the skeleton elements that are used inside.
Use the Skeleton.BodyText component to simulate bodies of text with multiple lines.
Use the Skeleton.DisplayText component to simulate headings, subheadings or titles.
Use the Skeleton.Image component to simulate images, illustrations, avatars or icons.
Use the Skeleton.Row component to simulate table rows. Only use this component as a child of the TableBody component. The Skeleton.Row component renders <tr> tags, and this HTML tag should always be a child of a <tbody> tag.
- Pass a value to the columnCount prop equal to the number of columns in your table (default value is 5).
- Pass a value to the rowCount prop equal to the number of rows you need.
- We think that for a better experience this value should match the number of rows that this table usually has when it's first loaded.

Examples

Basic usage

Different speed and color

Composition with different skeleton components

Setting image width and height

Pass some value to the width and height props to make the skeleton the same size as the simulated image (default values are 70). You can use the same values a normal <rect> tag would accept for width and height

Round image skeleton

Pass some value to the radiusX and radiusY props to control the roundness of skeleton's corners (default values are 0). You can use the same values a normal <rect> tag would accept for rx and ry

Table rows

Usage without compound components

Props (API reference)

Skeleton.Container

Skeleton.BodyText

Skeleton.DisplayText

Skeleton.Image

Skeleton.Row

@contentful/f36-core @contentful/f36-table @contentful/f36-tokens emotion

@infinitebrahmanuniverse/nolb-_cont @everything-registry/sub-chunk-196 @zalastax/nolb-_cont @contentful/f36-entity-list @contentful/f36-image @contentful/f36-multiselect @contentful/f36-navbar @contentful/f36-card @contentful/f36-components @contentful/f36-autocomplete

10 days ago

12 days ago

13 days ago

13 days ago

16 days ago

19 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

8 months ago

7 months ago

8 months ago

7 months ago

10 months ago

9 months ago

9 months ago

10 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

11 months ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4.0.1-next-v4-10675.2471

3 years ago

4.0.1-next-v4-10848.2476

3 years ago

4.0.1-next-v4-10715.2474

3 years ago

4.0.1-next-v4-10839.2475

3 years ago

4.0.1-next-v4-10916.2480

3 years ago

4.0.1-beta.2482

3 years ago

4.0.1-beta.2483

3 years ago

4.0.1-next-v4-10931.2481

3 years ago

4.0.1-beta.2489

3 years ago

4.0.1-beta1.2482

3 years ago

4.0.1-next-v4-10680.2472

3 years ago

4.0.1-next-v4-10623.2468

3 years ago

4.0.1-next-v4-10647.2470

3 years ago

4.0.1-next-v4-10633.2469

3 years ago

4.0.1-next-v4-10536.2462

3 years ago

4.0.1-next-v4-10542.2463

3 years ago

4.0.1-next-v4-10612.2466

3 years ago

4.0.1-next-v4-10595.2465

3 years ago

4.0.1-next-v4-10472.2461

3 years ago

4.0.1-next-v4-10564.2464

3 years ago

4.0.1-next-v4-10423.2460

3 years ago

4.0.1-next-v4-10118.2446

3 years ago

4.0.1-next-v4-10266.2451

3 years ago

4.0.1-next-v4-10292.2452

3 years ago

4.0.1-next-v4-10345.2455

3 years ago

4.0.1-next-v4-9745.2431

3 years ago

4.0.1-next-v4-9473.2426

3 years ago

4.0.1-next-v4-9468.2425

3 years ago

4.0.1-next-v4-9789.2434

3 years ago

4.0.1-next-v4-9961.2441

3 years ago

4.0.1-next-v4-10041.2444

3 years ago

4.0.1-next-v4-10373.2458

3 years ago

4.0.1-next-v4-10308.2453

3 years ago

4.0.1-next-v4-9971.2442

3 years ago

4.0.1-next-v4-9697.2430

3 years ago

4.0.1-next-v4-10223.2450

3 years ago

4.0.1-next-v4-10152.2447

3 years ago

4.0.1-next-v4-10330.2454

3 years ago

4.0.1-next-v4-10204.2448

3 years ago

4.0.1-next-v4-9780.2433

3 years ago

4.0.1-next-v4-9898.2438

3 years ago

4.0.1-next-v4-10363.2457

3 years ago

4.0.1-next-v4-10350.2456

3 years ago

4.0.1-next-v4-9766.2432

3 years ago

4.0.1-next-v4-9921.2439

3 years ago

4.0.1-next-v4-9502.2427

3 years ago

4.0.1-next-v4-10378.2459

3 years ago

4.0.1-next-v4-9547.2428

3 years ago

4.0.1-next-v4-9952.2440

3 years ago

4.0.1-next-v4-9335.2422

3 years ago

4.0.1-next-v4-9346.2423

3 years ago

4.0.1-next-v4-9281.2419

3 years ago

4.0.1-next-v4-9274.2418

3 years ago

4.0.1-next-v4-9248.2416

3 years ago

4.0.1-next-v4-9320.2421

3 years ago

4.0.1-next-v4-9287.2420

3 years ago

4.0.1-next-v4-9225.2415

3 years ago

4.0.1-next-v4-9200.2414

3 years ago

4.0.1-next-v4-9168.2413

3 years ago

4.0.1-next-v4-9155.2412

3 years ago

4.0.1-next-v4-9049.2406

3 years ago

4.0.1-next-v4-9126.2410

3 years ago

4.0.1-next-v4-9086.2408

3 years ago

4.0.1-next-v4-9075.2407

3 years ago

4.0.1-next-v4-9019.2404

3 years ago

4.0.1-next-v4-8971.2401

3 years ago

4.0.1-next-v4-8986.2402

3 years ago

4.0.1-next-v4-8879.2361

3 years ago

4.0.1-next-v4-8833.2358

3 years ago

4.0.1-next-v4-8904.2363

3 years ago

4.0.1-next-v4-8955.2400

3 years ago

4.0.1-next-v4-8942.2365

3 years ago

4.0.1-next-v4-8846.2359

3 years ago

4.0.1-next-v4-8947.2366

3 years ago

4.0.1-next-v4-8753.2355

3 years ago

4.0.1-next-v4-8804.2357

3 years ago

4.0.1-next-v4-8514.2351

3 years ago

4.0.1-next-v4-8739.2354

3 years ago

4.0.1-next-v4-8733.2353

3 years ago

4.0.1-next-v4-8499.2349

3 years ago

4.0.1-next-v4-8377.2344

3 years ago

4.0.1-next-v4-8455.2348

3 years ago

4.0.1-next-v4-8286.2343

3 years ago

4.0.1-next-v4-8206.2342

3 years ago

4.0.1-next-v4-8093.2338

3 years ago

4.0.1-next-v4-8101.2339

3 years ago

4.0.1-next-v4-8125.2340

3 years ago

4.0.1-next-v4-8053.2336

3 years ago

4.0.1-next-v4-8006.2334

3 years ago

4.0.1-next-v4-8039.2335

3 years ago

4.0.1-next-v4-7963.2332

3 years ago

4.0.1-next-v4-8060.2337

3 years ago

4.0.1-next-v4-7985.2333

3 years ago

4.0.1-next-v4-7936.2331

3 years ago

4.0.1-next-v4-7911.2329

3 years ago

4.0.1-next-v4-7926.2330

3 years ago

4.0.1-next-v4-7774.2326

3 years ago

4.0.1-next-v4-7712.2324

3 years ago

4.0.1-next-v4-7888.2327

3 years ago

4.0.1-next-v4-7654.2323

3 years ago

4.0.1-next-v4-7604.2322

3 years ago

4.0.1-next-v4-6754.2279

3 years ago

4.0.1-next-v4-6859.2287

3 years ago

4.0.1-next-v4-6811.2284

3 years ago

4.0.1-next-v4-6748.2278

3 years ago

4.0.1-next-v4-6854.2286

3 years ago

4.0.1-next-v4-6831.2285

3 years ago

4.0.1-next-v4-6763.2280

3 years ago

4.0.1-next-v4-6795.2281

3 years ago

4.0.1-next-v4-6652.2269

3 years ago

4.0.1-next-v4-6660.2272

3 years ago

4.0.1-next-v4-6682.2274

3 years ago

4.0.1-next-v4-6664.2273

3 years ago

4.0.1-next-v4-6714.2276

3 years ago

4.0.1-next-v4-6685.2275

3 years ago

4.0.1-next-v4-6548.2251

3 years ago

4.0.1-next-v4-6507.2250

3 years ago

4.0.1-next-v4-6436.2246

3 years ago

4.0.1-next-v4-6471.2249

3 years ago

4.0.1-next-v4-6465.2248

3 years ago

4.0.1-next-v4-6423.2245

3 years ago

4.0.1-next-v4-6408.2244

3 years ago

4.0.1-next-v4-6443.2247

3 years ago

4.0.1-next-v4-6391.2243

3 years ago

4.0.1-next-v4-6381.2242

3 years ago

4.0.1-next-v4-6330.2234

3 years ago

4.0.1-next-v4-6321.2232

3 years ago

4.0.1-next-v4-6317.2231

3 years ago

4.0.1-next-v4-6313.2230

3 years ago

4.0.1-next-v4-6289.2215

3 years ago

4.0.1-next-v4-6282.2214

3 years ago