BoltSkeleton

Pure design component that will render skeleton bars until all data are correctly fetched.

Usage

<template>
  <c-bolt-skeleton rows="5"></c-bolt-skeleton>
</template>

Attributes

rows : number

Number of skeleton rows to display

withLabels : boolean

Dictates whether to show or not skeleton rows for labels. (Useful if you want to mockup input fields)

Styles

:host {
  --_skeletonBackground: var(--skeletonBackground, #dedede);
  --_skeletonThumb:  var(--skeletonThumb, #fafafa);
  --_skeletonBackgroundAlpha: var(--skeletonBackgroundAlpha, 0%);
  --_skeletonThumbAlpha: var(--_skeletonBackgroundAlpha, var(--skeletonThumbAlpha));
  --_skeletonWidth: var(--skeletonWidth, 100%);
  --_skeletonHeight: var(--skeletonHeight, 40px);
  --_skeletonRows: var(--skeletonRows, auto);
  --_skeletonCols: var(--skeletonCols, repeat(2, 1fr));
  --_skeletonRadius: var(--skeletonRadius, var(--slds-c-input-radius-border,
    var(--sds-c-input-radius-border,
      var(
        --lwc-borderRadiusMedium, 0.25rem
      )
    )
  ));

  display: grid;
  width: var(--_skeletonWidth);
  grid-template-columns: var(--_skeletonCols);
  grid-auto-rows: var(--_skeletonRows);
  gap: .5rem;
  margin-block: .2rem;
}