https://github.com/thetarnav/vue-wave-skeleton
Cool Wave Skeleton component for loading content in Vue 3. Animated, unique, and chill.
https://github.com/thetarnav/vue-wave-skeleton
sfc skeleton vue vue3
Last synced: about 2 months ago
JSON representation
Cool Wave Skeleton component for loading content in Vue 3. Animated, unique, and chill.
- Host: GitHub
- URL: https://github.com/thetarnav/vue-wave-skeleton
- Owner: thetarnav
- Created: 2021-08-27T21:15:25.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-28T18:01:56.000Z (almost 5 years ago)
- Last Synced: 2025-03-02T01:09:12.693Z (over 1 year ago)
- Topics: sfc, skeleton, vue, vue3
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-wave-skeleton
- Size: 143 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Wave Skeleton
Animated skeleton component for **Vue 3**, by moving svg wave with constant **chill animation**. A cool way to show that the text content of your page is loading, an alternative to the boring, typical skeletons.
[](https://www.npmjs.com/package/vue-wave-skeleton)
## Install
```sh
npm i vue-wave-skeleton
```
## Usage
```js
import WaveSkeleton from 'vue-wave-skeleton'
// register globally
app.component('WaveSkeleton', WaveSkeleton)
// or locally
export default {
components: { WaveSkeleton },
// ...
}
```
```html
```
```css
/* and set the size in css */
.wave-skeleton {
width: 260px;
height: 30px;
}
```
## Props
Right now there aren't a lot of these. But let me know if you need some.
#### transitionName
- _Optional_
- Type: `String`
- Name of your cursom enter/leave transition, you want to use instead of the default fade.
## CSS Variables
Some css properties can be easily changed by setting css variables.
```css
/* the defaults: */
.gooey-background {
/* name of the infinite animation, the default is a simple fade */
--wave-skeleton-animation: wave-skeleton-fade;
/* duration of the animation */
--wave-skeleton-duration: 800ms;
/* stroke color of the wave */
--wave-skeleton-color: #828282;
/* stroke width */
--wave-skeleton-stroke-width: 5.2px;
/* shape of the path cap */
--wave-skeleton-stroke-linecap: round;
}
```
## Sizes in CSS
Right now this component doesn't have a default height or width, so it's for you to decide on it yourself and set it.
The generall rule is to have matching `height` between components you want to have looking similar.
To add other sizes e.g. to represent titles or captions, use classes, like `.title` or `.caption`.
```html
```
```css
.wave-skeleton.title {
width: 280px;
height: 50px;
}
.wave-skeleton.smaller {
width: 130px;
}
```
---
### About the effect
The original solution I've based mine is this [codepen by Varun Vachhar](https://codepen.io/winkerVSbecks/pen/EVJGVj). Also check out [my prototype codepen](https://codepen.io/thetarnav/details/bGRVbro) where I've tried to adapt this solution.
Generally I've made this component to use in my personal projects. But let me know if you have any ideas / requests regarding this component. It's a really cool effect, so I would like to tur it into an even better component.