# vue-spinkit

> A collection of loading indicators animated with CSS for VueJS

Latest version **2.1.5** (published 2025-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-spinkit
pnpm add vue-spinkit
yarn add vue-spinkit
bun add vue-spinkit
```

## Health

**Score 35/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.1.5 |
| Published | 2025-09-29 |
| First published | 2018-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 101.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 111 |
| Author | Chanwit Piromplad |
| Maintainers | kingkong64 |
| Keywords | spinkit, vue-spinkit, loading, vue-loading |

## Links

- npm: https://www.npmjs.com/package/vue-spinkit
- Repository: https://github.com/TonPC64/vue-spinkit
- Homepage: http://vue-spinkit.surge.sh
- Issues: https://github.com/TonPC64/vue-spinkit/issues
- npm.io page: https://npm.io/package/vue-spinkit

## Recent versions

- 2.1.5 (latest) — 2025-09-29
- 2.1.5-dev.0 (dev) — 2025-09-29
- 2.1.4 — 2025-09-29
- 2.1.3 — 2025-09-29
- 2.1.2 — 2025-09-28
- 2.1.1 — 2025-09-28
- 2.1.1-dev.4 — 2025-09-28
- 2.1.1-dev.3 — 2025-09-28
- 2.1.1-dev.2 — 2025-09-28
- 2.1.1-dev.1 — 2025-09-28
- 2.1.0 — 2025-09-28
- 2.0.0 — 2021-10-23
- 1.7.12 — 2020-07-29
- 1.7.11 — 2020-07-21
- 1.7.10 — 2019-10-25
- … 25 more at https://npm.io/package/vue-spinkit/versions

## README

# vue-spinkit

> A collection of loading indicators animated with CSS for VueJS

[![Language](https://img.shields.io/badge/language-vue-green.svg)](https://img.shields.io/badge/language-vue-green.svg)
[![License](https://img.shields.io/badge/license-MIT-000000.svg)](https://img.shields.io/badge/license-MIT-000000.svg)
[![NPM Package](https://img.shields.io/npm/v/vue-spinkit.svg)](https://www.npmjs.com/package/vue-spinkit)
[![NPM Downloads](https://img.shields.io/npm/dm/vue-spinkit.svg)](https://npmjs.org/package/vue-spinkit)
[![Build Status](https://github.com/TonPC64/vue-spinkit/actions/workflows/node.js.yml/badge.svg)](https://github.com/TonPC64/vue-spinkit/actions/workflows/node.js.yml)

## Inspiration
* [Spinkit](http://tobiasahlin.com/spinkit/) css animated loading
* [react-spinkit](https://github.com/KyleAMathews/react-spinkit)
* [loaders.css](https://connoratherton.com/loaders)

## [DEMO](http://vue-spinkit.surge.sh/)
![](./static/example1.gif)
![](./static/example2.gif)
![](./static/example3.gif)
![](./static/example4.gif)

# vue-spinkit

A collection of CSS-based loading indicators for Vue.

Badges

[![NPM Package](https://img.shields.io/npm/v/vue-spinkit.svg)](https://www.npmjs.com/package/vue-spinkit)  [![Build Status](https://github.com/TonPC64/vue-spinkit/actions/workflows/node.js.yml/badge.svg)](https://github.com/TonPC64/vue-spinkit/actions/workflows/node.js.yml)

Demo

Live demo: http://vue-spinkit.surge.sh/

Why this README is different
---------------------------------
This package is shipped so the styles are injected at runtime from the JS bundle. That means you no longer need to (and shouldn't) import a separate `style.css` file — simply import the package entry and the required CSS is automatically inserted into the page when running in a browser.

This README explains how to use vue-spinkit without a separate CSS import and covers common usage patterns and troubleshooting notes.

Installation
------------

```bash
# using npm
npm install --save vue-spinkit
# or yarn
yarn add vue-spinkit
```

Quick usage (bundlers — recommended)
-----------------------------------

If you're using a bundler (Vite, Webpack, Rollup, etc.), import the package root. The library entry injects the CSS at runtime, so you do not need to import any CSS file.

```js
import Vue from 'vue'
import Spinner from 'vue-spinkit'

// Register globally
Vue.component('Spinner', Spinner)

// or locally in a component
export default {
  components: { Spinner }
}
```

Notes:
- Always import from the package root (e.g. `import Spinner from 'vue-spinkit'`). Importing component files directly (for example `vue-spinkit/src/components/Spinner.vue`) may bypass the CSS-injection entry and you'll see unstyled output.

Browser (UMD) usage
--------------------

You can also use the prebuilt UMD bundle in a plain HTML page. The UMD bundle includes the runtime style injection.

```html
<!-- Vue must be present -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- UMD build served from the package (or your CDN)
     change path to where your build is served -->
<script src="https://unpkg.com/vue-spinkit/dist/vue-spinkit.common.js"></script>
<script>
  // The library exposes `VueSpinkit` as the global name (UMD). Use the exported Spinner.
  const Spinner = window.VueSpinkit && (window.VueSpinkit.Spinner || window.VueSpinkit.default)
  Vue.component('Spinner', Spinner)
  new Vue({ el: '#app' })
</script>
```

Use in templates
---------------

```html
<Spinner name="circle" color="#e74c3c" />
```

Server-side rendering (SSR)
--------------------------

The library injects styles on the client side only (it checks for `document` before injecting). That means:
- On SSR the server HTML won't include the styles. When the page is hydrated in the browser the library will insert the CSS into the page head.
- If you need server-rendered inline-critical styles, you should extract the CSS at build time (not covered here) or control injection manually by adding an explicit export (advanced).

Troubleshooting
---------------

- If spinners look unstyled, make sure you imported from the package root: `import Spinner from 'vue-spinkit'`.
- If you still see a separate `style.css` in your build output, check for any components or demo files that import CSS without `?raw` or any SFC `<style>` blocks that pull in CSS. The library is configured to avoid emitting a separate CSS file when built from the entrypoint.

Build notes (for maintainers)
----------------------------

- Building locally produces a single JS bundle (UMD) that contains both code and CSS injection. Run:

```bash
npm run build
```

- The CI workflow uses a smoke test to verify the built bundle loads — the test no longer requires a separate CSS file because styles are injected by the JS bundle.

Props
-----

The Spinner component accepts the following props (short):

- `name` (string) — which spinner to render (default: `three-bounce`).
- `color` (string) — color value (hex, rgb, or named color).
- `noFadeIn` (boolean) — disable fade-in.
- `fadeIn` (string) — fade-in timing: `full`, `half`, `quarter`.
- `className`, `width`, `height` — extra class and sizing.

License
-------

MIT

---
_Source: https://npm.io/package/vue-spinkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._