pack-of-spinners-svelte v1.0.0-beta.1

pack-of-spinners-svelte

The official svelte component for pack-of-spinners

Usage

Get the pack-of-spinners-svelte package from npm.

$ npm install pack-of-spinners-svelte

And import the required spinners.

<script>
  import { CirclesSpin, CubesWandering } from 'pack-of-spinners-svelte';
</script>

<CirclesSpin size={40} color="#2980b9" classes="custom-class-name">

Non-svelte users

If you do not use svelte, you can initialize the component as follows:

import { CirclesSpin, CubesWandering } from 'pack-of-spinners-svelte';

let spinner = new CirclesSpin({
  target: document.querySelector('#target-parent-element'),
  props: {
    size: 40,
    color: "#2980b9",
    classes: "custom-class-name"
  }
});

You can also change the props after initialization. Refer svelte docs for how to use svelte components.

Notes

• Spinner component names are PascalCase names of the spinners from pack-of-spinners
• For non-svelte users, the component automatically injects CSS. It may at some cases, cause CSP violations. You are recommended to directly use the CSS and HTML from pack-of-spinners.

Extracting CSS - Svelte users

pack-of-spinners-svelte references CSS from pack-of-spinners and does not include the styles directly.

In order for references to work, you need to install svelte-preprocess and postcss.

Example rollup config file for processing CSS references.

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import { postcss } from 'svelte-preprocess';
import pkg from './package.json';

export default {
	input: 'src/index.js',
	output: [
		{ file: pkg.module, 'format': 'es' },
		{ file: pkg.main, 'format': 'umd', "ComponentName" }
	],
	plugins: [
		svelte({
			preprocess: postcss({ plugins:[] })
		}),
		resolve()
	]
};

If you have any questions, feel free to ask in the bugs section with a prefix 'Question:'