💅🏻 Vue-loading-skeleton
Make beautiful loading skeleton that automatically adapt your vue app.
Base usage
Install by npm
/yarn
with vue-loading-skeleton
import Skeleton from 'vue-loading-skeleton'; // In jsx template<Skeleton /><Skeleton = />
Or register for global component
import Vue from 'vue';import Skeleton from 'vue-loading-skeleton'; Vue // In jsx template<PuSkeleton /><PuSkeleton = />
🌈 Introduction
Adapts to the styles you have defined
The <Skeleton/>
component is design to used directly in your vue component. It can replace the main content while page still in loading. So you don't need to prepare a skeleton screen meticulously to match the font-size
, margin
or another style your content takes on, wrap the content with the <Skeleton/>
component, it will automatically fill the correct dimensions.
For example:
{{ props.data.img }} {{ props.data.title }} {{ props.data.body }}
⚠️ Notice
The skeleton component will check the tag
and text
in the first child node. If you find the component work is not in expect, you should use v-if
or loading props
, and report the issues to me.
📔Usage
Base usage
{{ content }}
Use v-if
{{ content }}
List Skeleton
In many cases, you need a skeleton list to fulfill a listing page. You can set the list data default to the number. Such as:
{{ item.content }}
{ return data: 10 } async { // some data fetch action const data = await ; thisdata = data; }
Theming
Using the <SkeletonTheme />
component, you can change the color, duration of all skeleton components below it:
import Skeleton Skeleton form 'vue-loading-skeleton'; <SkeletonTheme ="#e6f3fd" ="#eef6fd"> <div ="item"> <div ="item__photo"> <PuSkeleton ="50px"> propsdataimg </PuSkeleton> </div> <div ="item__meta"> <div ="item__title"> <PuSkeleton> propsdatatitle </PuSkeleton> </div> <div ="item__info"> <PuSkeleton :="2"> propsdatabody </PuSkeleton> </div> </div> </div></SkeletonTheme>
Skeleton props
props | description | type | default |
---|---|---|---|
count | rows count of component | number | 1 |
duration | animation duration time, 0 as close | number | 1.5 |
width | component width | string | |
height | component height | string | |
circle | make the skeleton look like a circle | boolean | false |
loading | skeleton loading status | boolean | undefined |
SkeletonTheme props
props | description | type | default |
---|---|---|---|
color | skeleton background color | string | #eeeeee |
highlight | animation highlight color | string | #f5f5f5 |
duration | set duration of all skeleton | number | 1.5 |
loading | control loading status of all skeletons | boolean | undefined |
tag | theme container tag name | string | div |