peact-loading-skeleton

This is a Port from react-loading-skeleton.
All Credit goes to original author. To see Project please go here

Make beautiful, animated loading skeletons that automatically adapt to your app.

!Gif of skeleton in action

Basic usage

Install by npm/yarn with react-loading-skeleton.

``javascript
import Skeleton from 'react-loading-skeleton';

// Simple, single-line loading skeleton
// Five-line loading skeleton
`

Principles

$3

The component is designed to be used directly in your components,
in place of content while it's still loading.
Unlike other libraries, rather than meticulously crafting a skeleton screen to
match the font-size, line-height or margins your content takes on,
use a component to have it automatically fill the correct dimensions.

For example:

`javascript
class Blogpost extends Component {
render() {
return (

{this.props.title || }

{this.props.body || }

);
}
}
`

...will produce the correctly-sized skeletons for the heading and body sections
without any further configuration of the component.

This ensures the loading state remains up-to-date with any changes
to your layout or typography.

$3

Instead, make components with _built-in_ skeleton states.

In addition to keeping the styling in-sync, here are some other reasons to do this:

1. Components represent all possible states it can be in - loading included.
1. It allows for more flexible loading patterns - in the Blogpost example, it's possible to have the title load first, and then the body, while having both pieces of content show loading skeletons at the right time.

Theming

Using a component, you can easily change the colors of all
skeleton components below it in the React hierarchy:

`javascript
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";

;
`

Duration

`javascript

`

duration: Number, defaults to 1.2

Duration is how long it takes do one cycle of the skeleton animation.

Width

width: Number | String | null, defaults to null

`javascript

`

Width of the skeleton. Useful when the skeleton is inside an inline element with
no width of its own.

Height

Height: Number | String | null, defaults to null

`javascript

`

Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance
a card. Also needed for the prop circle (see below).

Circle

Circle: Boolean | false, defaults to false

`javascript

``

Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.