peterroe / uspin

A vue3 component that spins on load

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

uspin

A vue3 component that spins on load

Install

$ npm install uspin

Usage

<script setup lang="ts">
  import { ref } from 'vue'
  import { hide, show } from 'uspin' // import uspin

  const targetRef = ref<HTMLElement | undefined>(undefined)
</script>

<template>
  <div ref="targetRef" class="demo">
    <p>πŸ’» A front end developer.</p>
    <p>πŸ₯‰ Working Rss-Reader based on tauri-app.</p>
    <p>πŸ¦„ Enjoy JavaScript,VueJs and NodeJs.</p>
    <p>πŸ‰ Hobby maybe blogging and write open source tools.</p>
    <p>πŸ’¨ Visit peterroe.icu for more information.</p>
  </div>
  <div class="demoButton">
    <!-- invoke method -->
    <button @click="show(targetRef)">show</button>
    <button @click="hide(targetRef)">hide</button>
  </div>
</template>

Config

export interface SpinConfig {
  logoColor?: string // default: '#fff'
  size?: string // default: '5em'
  bgColor?: string // default: '#ddd'
  opacity?: number // default: 0.5
}

export declare function show(targetRef: Ref<Element>, config?: SpinConfig): void

export declare function hide(targetRef: Ref<Element>): void

Preview

img

About

A vue3 component that spins on load


Languages

Language:Vue 59.6%Language:TypeScript 33.9%Language:HTML 6.5%