img 加载 svg占位符
Vue内容加载器 (vue-content-loader)
SVG component to create placeholder loading, like Facebook cards loading.
SVG组件,用于创建占位符加载,例如Facebook卡加载。
特征 (Features)
This is a Vue port for react-content-loader.
这是react-content-loader的Vue端口。
Completely customizable: you can change the colors, speed and sizes.
完全可定制:您可以更改颜色,速度和大小。
Create your own loading: use the online tool to create your custom loader easily.
创建自己的加载程序:使用在线工具轻松创建自定义加载程序。
You can use it right now: there are a lot of presets already.
您现在可以使用它:已经有很多预设。
Performance:
性能:
- Tree-shakable and highly optimized bundle. 可摇树且高度优化的捆绑包。
- Pure SVG, so it's works without any javascript, canvas, etc. 纯SVG,因此无需任何JavaScript,canvas等即可使用。
- Pure functional components. 纯功能组件。
安装 (Install)
yarn add vue-content-loader
用法 (Usage)
👀👉 Demos: Storybook | with Nuxt.js
<template>
<content-loader></content-loader>
</template>
<script>
import { ContentLoader } from 'vue-content-loader'
export default {
components: {
ContentLoader
}
}
</script>
内置装载机 (Built-in loaders)
import {
ContentLoader,
FacebookLoader,
CodeLoader,
BulletListLoader,
InstagramLoader,
ListLoader
} from 'vue-content-loader'
ContentLoader
is a meta loader while other loaders are just higher-order components of it. By default ContentLoader
only displays a simple rectangle, here's how you can use it to create custom loaders:
ContentLoader
是一个元加载器,而其他加载器只是它的高阶组件。 默认情况下, ContentLoader
仅显示一个简单的矩形,这是使用它创建自定义加载器的方法:
<ContentLoader>
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
<rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
<rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
<rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</ContentLoader>
API (API)
道具 (Props)
Prop | Type | Default | Description |
---|---|---|---|
width | number | 400 | |
height | number | 130 | |
speed | number | 2 | |
preserveAspectRatio | string | 'xMidYMid meet' | |
primaryColor | string | '#f9f9f9' | |
secondaryColor | string | '#ecebeb' | |
uniqueKey | string | randomId() | Unique ID, you need to make it consistent for SSR |
animate | boolean | true |
Struts | 类型 | 默认 | 描述 |
---|---|---|---|
宽度 | 数 | 400 | |
高度 | 数 | 130 | |
速度 | 数 | 2 | |
reserveAspectRatio | 串 | 'xMidYMid meet' | |
primaryColor | 串 | '#f9f9f9' | |
secondaryColor | 串 | '#ecebeb' | |
uniqueKey | 串 | randomId() | 唯一ID,您需要使其与SSR保持一致 |
动画 | 布尔值 | true |
翻译自: https://vuejsexamples.com/svg-component-to-create-placeholder-loading-like-facebook-cards-loading/
img 加载 svg占位符