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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部