img 加載 svg占位符

Vue內(nèi)容加載器 (vue-content-loader)

SVG component to create placeholder loading, like Facebook cards loading.

SVG組件，用于創(chuàng)建占位符加載，例如Facebook卡加載。

View demo 查看演示 Download Source 下載源

特征 (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.

  創(chuàng)建自己的加載程序：使用在線工具輕松創(chuàng)建自定義加載程序。

• You can use it right now: there are a lot of presets already.

  您現(xiàn)在可以使用它：已經(jīng)有很多預(yù)設(shè)。

• Performance:

  性能：

  • Tree-shakable and highly optimized bundle.
    可搖樹且高度優(yōu)化的捆綁包。
  • Pure SVG, so it's works without any javascript, canvas, etc.
    純SVG，因此無(wú)需任何JavaScript，canvas等即可使用。
  • Pure functional components.
    純功能組件。

安裝 (Install)

yarn add vue-content-loader

用法 (Usage)

👀👉 Demos: Storybook | with Nuxt.js

👀👉演示： 故事書 | 與Nuxt.js

<template><content-loader></content-loader> </template><script> import { ContentLoader } from 'vue-content-loader'export default {components: {ContentLoader} } </script>

內(nèi)置裝載機(jī) (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是一個(gè)元加載器，而其他加載器只是它的高階組件。 默認(rèn)情況下， ContentLoader僅顯示一個(gè)簡(jiǎn)單的矩形，這是使用它創(chuàng)建自定義加載器的方法：

<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)

PropTypeDefaultDescription

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 類型 默認(rèn) 描述

寬度	數(shù)	400
高度	數(shù)	130
速度	數(shù)	2
reserveAspectRatio	串	'xMidYMid meet'
primaryColor	串	'#f9f9f9'
secondaryColor	串	'#ecebeb'
uniqueKey	串	randomId()	唯一ID，您需要使其與SSR保持一致
動(dòng)畫	布爾值	true

翻譯自: https://vuejsexamples.com/svg-component-to-create-placeholder-loading-like-facebook-cards-loading/

img 加載 svg占位符

總結(jié)

以上是生活随笔為你收集整理的img 加载 svg占位符_SVG组件可创建占位符加载，例如Facebook卡加载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。