@saeris/vue-spinners

WebJar for @saeris/vue-spinners

License	MIT
GroupId	org.webjars.npm
ArtifactId	saeris__vue-spinners
Last Version	1.0.8-2
Release Date	Aug 14, 2019
Type	jar
Description	@saeris/vue-spinners WebJar for @saeris/vue-spinners
Project URL	http://webjars.org
Source Code Management	https://github.com/Saeris/vue-spinners

Download saeris__vue-spinners

Filename	Size
saeris__vue-spinners-1.0.8-2.pom
saeris__vue-spinners-1.0.8-2.jar	449 KB
saeris__vue-spinners-1.0.8-2-sources.jar	22 bytes
saeris__vue-spinners-1.0.8-2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/saeris__vue-spinners/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>saeris__vue-spinners</artifactId>
    <version>1.0.8-2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/saeris__vue-spinners/
implementation 'org.webjars.npm:saeris__vue-spinners:1.0.8-2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/saeris__vue-spinners/
implementation ("org.webjars.npm:saeris__vue-spinners:1.0.8-2")

Apache Buildr

'org.webjars.npm:saeris__vue-spinners:jar:1.0.8-2'

Apache Ivy

<dependency org="org.webjars.npm" name="saeris__vue-spinners" rev="1.0.8-2">
  <artifact name="saeris__vue-spinners" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='saeris__vue-spinners', version='1.0.8-2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "saeris__vue-spinners" % "1.0.8-2"

Leiningen

[org.webjars.npm/saeris__vue-spinners "1.0.8-2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Vue Spinners

A Vue.js port of react-spinners.

📦 Installation

npm install --save @saeris/vue-spinners
# or
yarn add @saeris/vue-spinners

🔧 Usage

There are a number of ways you can use this library! Here are a few examples:

Vue Plugin

import Vue from 'vue'
import { VueSpinners } from '@saeris/vue-spinners'

Vue.use(VueSpinners)

// Each spinner can now be used in your templates anywhere in the app!

Local Component Registration

import { BarLoader } from '@saeris/vue-spinners'

export default {
  components: {
    BarLoader
  },
  // ...
}

JSX Component

import { BarLoader } from '@saeris/vue-spinners'

export default {
  data: () => ({
    loading: true
  }),
  render() {
    return (
      <div class='loader'>
        <ClipLoader
          class="custom-class"
          loading={this.loading}
          color={'#bada55'}
          size={150}
          sizeUnit={"px"}
        />
      </div>
    )
  }
}

Unpkg Import

<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@saeris/vue-spinners"></script>

<!--Use a component somewhere in your app-->
<div id="app">
  <bar-loader class="custom-class" :color="#bada55" :loading="loading" :size="150" :sizeUnit="px"></bar-loader>
</div>

<script>
  new Vue({ el: '#app', data: { loading: true } })
</script>

📋 Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true
color: '#000000'

For size, height, and width props, there are sizeUnit, heightUnit, and widthUnit prop that accepts px, %, or em. The default for the unit prop is px.

Loader	size:int	height:int	width:int	radius:int	margin:str
BarLoader		4	100
BeatLoader	15				2px
BounceLoader	60
CircleLoader	50
ClimbingBoxLoader	15
ClipLoader	35
DotLoader	60				2px
FadeLoader		15	5	2	2px
GridLoader	15
HashLoader	50				2px
MoonLoader	60				2px
PacmanLoader	25				2px
PropagateLoader	15
PulseLoader	15				2px
RingLoader	60				2px
RiseLoader	15				2px
RotateLoader	15				2px
ScaleLoader		35	4	2	2px
SkewLoader	20
SquareLoader	50
SyncLoader	15				2px

🏖️ Demo

You can either visit the live demo site, clone this repo and run the demo locally using yarn start and opening your browser to http://localhost:8080, or you can just play with it inside of CodeSandbox here.

📣 Acknowledgements

This library is a Vue port of react-spinners by David Hu, who's library is based on Halogen.

🥂 License

Released under the MIT license.

Versions

Version
1.0.8-2 Aug 14, 2019
1.0.8 Aug 5, 2019