https://github.com/willmendesneto/vue-skeleton-content-loader
Make beautiful, animated loading skeletons that automatically adapt to your Vue apps
https://github.com/willmendesneto/vue-skeleton-content-loader
animation content content-loader facebook-loader ghost instagram-loader loader loading module package screen skeleton skeleton-animation skeleton-loader ui vue vue-loader vue-skeleton vue-skeleton-content-loader vue-skeleton-loader
Last synced: 3 months ago
JSON representation
Make beautiful, animated loading skeletons that automatically adapt to your Vue apps
- Host: GitHub
- URL: https://github.com/willmendesneto/vue-skeleton-content-loader
- Owner: willmendesneto
- License: mit
- Created: 2025-06-09T18:28:08.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-13T13:21:24.000Z (5 months ago)
- Last Synced: 2025-08-09T18:48:52.889Z (3 months ago)
- Topics: animation, content, content-loader, facebook-loader, ghost, instagram-loader, loader, loading, module, package, screen, skeleton, skeleton-animation, skeleton-loader, ui, vue, vue-loader, vue-skeleton, vue-skeleton-content-loader, vue-skeleton-loader
- Language: TypeScript
- Homepage:
- Size: 434 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-vue - vue-skeleton-content-loader - Lightweight and accessible library to make beautiful, animated loading skeletons that automatically adapt to your Vue app (Components & Libraries / UI Components)
- fucking-awesome-vue - vue-skeleton-content-loader - Lightweight and accessible library to make beautiful, animated loading skeletons that automatically adapt to your Vue app (Components & Libraries / UI Components)
README
# Vue Skeleton Content Loader
[](https://npmjs.org/vue-skeleton-content-loader)
[](https://stackblitz.com/edit/vue-skeleton-content-loader-sample)
[](https://stackblitz.com/edit/vue-skeleton-content-loader-user-card-component-sample)
[](https://npmjs.org/vue-skeleton-content-loader)
[](https://npmjs.org/vue-skeleton-content-loader)
[](https://circleci.com/gh/willmendesneto/vue-skeleton-content-loader)
[](https://coveralls.io/r/willmendesneto/vue-skeleton-content-loader?branch=main)
[](https://bundlephobia.com/result?p=vue-skeleton-content-loader)
[](/LICENSE)
## Why skeletons?
The idea of this component is to make the process transparent and easier. So the main point is to integrate this component with other tooling processes, such as:
- Server-side rendering;
- Progressive rendering;
- Any other that you like :)
It's totally transparent for you and you can integrate it easily into your application, improving your user experience 🎉
- [Demo](#demo)
- [Install](#install)
- [Usage](#usage)
- [Development](#development)
- [Contribute](#contribute)
## Demo
Try out our demos on Stackblitz!
- [Usage: animations, appearance, and themes](https://vue-skeleton-content-loader-sample.stackblitz.io)
- [User Card Component Loading simulation using Vue Skeleton Loader](https://vue-skeleton-content-loader-user-card-component-sample.stackblitz.io)
## Install
You can get it on NPM by installing the `vue-skeleton-content-loader` module as a project dependency.
```shell
npm install vue-skeleton-content-loader --save
```
## Usage
### Basic Usage - Local import
To use `VueSkeletonContentLoader` in your Vue application, you first need to import it into your component's script section.
```typescript
// YourComponent.vue
import { VueSkeletonContentLoader } from 'vue-skeleton-content-loader';
Circle Skeleton
Line Skeleton
Square Skeleton
```
### Global Registration - Component register via app boostrap file
For global availability across your application, you can register `VueSkeletonContentLoader` when you create your Vue app instance.
```typescript
// main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
// Note: import default export for global registration
import VueSkeletonContentLoader from 'vue-skeleton-content-loader';
const app = createApp(App);
// Register globally
app.component('VueSkeletonContentLoader', VueSkeletonContentLoader);
app.mount('#app');
```
After global registration, you can use `` directly in any component's template without explicit import.
### Props
`VueSkeletonContentLoader` accepts several props to customize its behavior and appearance:
- `count` - _default_ `1`: Number of skeleton lines/shapes to render.
- `animation` - _default_ `progress`: Defines the CSS animation. See [Animations](#animations) for options.
- `appearance` - _default_ `line`: Defines the shape of the skeleton. See [Appearance](#appearance) for options.
- `theme` - _default_ `null`: An object containing CSS styles to apply to the skeleton. See [Theming](#theming) for details.
- `size` - _default_ `null`: A number to be passed for the component if `appearance` is `square`. Uses `pixel` as default unit and accepts as number or number with `px` suffix. E.G: `40` or `40px`
- `loadingText` - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to "Loading..."
- `aria-label` - _default_ `loading`: you can add `ariaLabel` as input of the component to set a different value.
## Appearance
You can also define which appearance you want to use in your skeleton loader by passing the options in your component via the `:appearance` prop.
### Options
- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line;
- `line`: it will render like a line. This is the same behavior as passing an empty string;
- `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :);
- `square`: it will use `square` as appearance and render it appropriately. Great for cards and images, for example;
- `custom-content`: it will NOT add any appearance. Great for custom content, such as SVG, internal components and such. Although not rendering appearance, animation will be added unless component has `animation="false"` prop;
## Animations
You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via the `:animation` prop.
### Options
- `"false"`|`false`: it will disable the animation. Component will receive `false` as string when `animation` prop is not using binding;
- `progress` - _default_: it will use it `progress` as animation;
- `progress-dark`: it will use it `progress-dark` as animation. Recommended if your color schema is darken;
- `pulse`: it will use `pulse` as animation;
- `pulse-dark`: it will use it `pulse-dark` as animation. Recommended if your color schema is darken;
> `progress` is the default animation, used as the single one previously. If you don't pass the animation attribute, it defaults to `progress`.
```html
```
> You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/vue-skeleton-content-loader-sample?file=app%2Fapp.component.html)
## Theming
You can also define different styles for the skeleton loader by passing an object with the css styles - in dashed case - into the component via the `:theme` prop.
```html
```
The `:theme` prop now accepts the same configuration as Vue's `v-bind:style` directive. That means you can manage to use it like you're doing with the built-in directive, having a pleasant and beautiful experience.
```html
```
> You should change the styles on the skeleton wrapper element in case you need to change the background color. You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/vue-skeleton-content-loader-sample?file=app%2Fapp.component.html) or check out a content load simulation [in this Stackblitz Live Demo Link](https://stackblitz.com/edit/vue-skeleton-content-loader-user-card-component-sample?file=app%2Fapp.component.html)
## Development
### Run demo locally
1. This project uses [Vite](https://vitejs.dev/) as base. That means you just need to run `npm run dev` and access the link `http://localhost:3000` (or whatever port Vite assigns) in your browser.
### Run tests
1. Run `npm test` to run tests. In case you want to test using watch, please use `npm run tdd`.
## Contribute
For any type of contribution, please follow the instructions in [CONTRIBUTING.md](https://github.com/willmendesneto/vue-skeleton-content-loader/blob/main/CONTRIBUTING.md) and read [CODE_OF_CONDUCT.md](https://github.com/willmendesneto/vue-skeleton-content-loader/blob/main/CODE_OF_CONDUCT.md) and [PUBLISHING_HOTFIX.md](https://github.com/willmendesneto/vue-skeleton-content-loader/blob/main/PUBLISHING_HOTFIX.md) files.
## Author
**Wilson Mendes (willmendesneto)**
-
-