vue-content-loader | 一款基于vuejs的SVG占位符加载动画组件

vue content loader是一款基于vuejs的SVG占位符加载动画组件。它使用SVG作为占位符加载动画，优雅的显示内容加载动画效果。它的特点有：

• 完全可定制：可以更改颜色、速度和大小。
• 创建自己的加载动画：使用在线工具轻松创建自定义加载动画。
• 可以立即使用：组件里已经有很多预设动画可供使用。
• 性能优化：可进行 Tree Shaking 和高度优化的打包。
• 纯 SVG：因此可以在没有任何 JavaScript、Canvas 等的情况下工作。
• 纯函数式组件：组件采用函数式编程风格。

注意：最新版本仅支持vue3.x，Vue2.x 和 Nuxt 2请使用vue-content-loader@^0.2替代。

使用方法

安装

如果您想使用vue content loaderSVG占位符加载动画组件，首先您需要安装它，命令如下：

npm i vue-content-loader
// 或者
yarn add vue-content-loader
    

使用

示例代码：

<template>
  <content-loader></content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader,
  },
}
</script>
    

内置的 loaders 有：

import {
  ContentLoader,
  FacebookLoader,
  CodeLoader,
  BulletListLoader,
  InstagramLoader,
  ListLoader,
} from 'vue-content-loader'     
    

默认情况下，ContentLoader 只显示一个简单的矩形，可以使用它来创建自定义加载器。

<ContentLoader viewBox="0 0 250 110">
  <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>   
    

你可以使用在线工具来生成自己想要的svg图形。

Props

vue content loaderSVG占位符加载动画组件的可用props如下：

• width: SVG 宽度，可以是数字或字符串，但不包括单位。
• height: SVG 高度，可以是数字或字符串，但不包括单位。
• viewBox: VG 的 viewBox 属性，一个字符串，格式为 'x y width height'。如果 width 或 height 为 null 或 undefined，则默认值为 '0 0 400 130'。
• preserveAspectRatio: SVG 的 preserveAspectRatio 属性，一个字符串，用于指定如何适应视口。
• speed: 动画速度。
• primaryColor: 背景颜色。
• secondaryColor: 高亮颜色。
• uniqueKey: 唯一标识符，需要在 SSR 中保持一致。
• animate: 是否启用动画，默认为 true。
• baseUrl: 基础 URL，如果在 中使用了 <base url="/" />，则需要指定该属性。默认值为空字符串。
• primaryOpacity: 背景不透明度（0 = 透明，1 = 不透明），用于解决 Safari 中的问题。
• secondaryOpacity:
• 高亮不透明度（0 = 透明，1 = 不透明），用于解决 Safari 中的问题。:

github网址：https://github.com/egoist/vue-content-loader