Biofarma | Bind UI

Skeleton

Skeleton indicates that the things are really happening. It is used to create a perception of reduced waiting time. Skeleton is good to when:

The component contains good amount of information, such as List or Card
There’s more than 1 element loading at the same time that requires an indicator
Not to use for a long-running process, e.g. importing data etc

Type	Resource
Design	Figma
Mobile	Web Storybook
Code	Gitlab

Skeleton Preview

Usage

import id.co.biofarma.binduiandroid.components.skeleton.*

    ParagraphSkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
    )
    ButtonSkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
    )
    ImageSkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
    )
      TableCellHeaderSkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
      )
      TableCellBodySkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
      )
      AvatarSkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
      )
      InputFormSkeletonPreviews(
          duration = 1500,
          easing = FastOutLinearInEasing,
          repeatMode = RepeatMode.Restart,
          textColor = Color.Black,
          angle = 0f,
          color = Color.LightGray,
      )

Examples

Duration

Use duration to set animation duration for the skeleton.

Angle (optional)

Use angle to determine angle of animation.

Color (optional)

Use color customizing color of the skeleton.

Props

Props	Required	Default	Type	Description
duration	true	-	`int`	Set duration of animation
easing	true	-	`Easing`	Easing mode for the skeleton animation.
repeatMode	true	-	`RepeatMode`	Repeate mode for the animation of skeleton.
textColor	false	`Color.Black`	`Color`	Set color of title above skeleton animation.
angle	false	`0f`	`float`	Set animation angle of skeleton.
color	false	`Color.LightGray`	`Color`	Set color of skeleton previews.
shimmerColors	false	`null`	`List<Color>?`	Set shimmerColors of skeleton previews.

Progress Bar Popover