vue-spinkit

> A collection of loading indicators animated with CSS for VueJS


Inspiration

* Spinkit css animated loading
* react-spinkit
* loaders.css

DEMO


vue-spinkit

A collection of CSS-based loading indicators for Vue.

Badges

 

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





`

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

`html

`

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