Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
vue-spinners-css
Advanced tools
[![CircleCI](https://circleci.com/gh/JoshK2/vue-spinners-css.svg?style=svg)](https://circleci.com/gh/JoshK2/vue-spinners-css) [![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponent
Weekly downloads
Readme
Amazing collection of Vue spinners components with pure css.
The Vue spinners are based on loading.io and from all over the web.
Browse components and explore their props with Bit.
Install specific vue spinner component with npm, yarn, unpkg or bit without having to install the whole project.
Install components and live demo
Each component accepts a color
prop, and loading
prop.
The default color
prop is #7f58af
.
The default loading
prop is true
.
Component that accepts size prop have a default size in pixel.
Component that accepts duration prop have a default duration in seconds.
Spinner | color: string | loading: boolean | size: number | duration: string |
---|---|---|---|---|
Circle Spinner | #7f58af | true | 64 | 2.4s |
Default Spinner | #7f58af | true | 80 | 1.2s |
DualRing Spinner | #7f58af | true | 80 | 1.2s |
Ellipsis Spinner | #7f58af | true | ||
Facebook Spinner | #7f58af | true | 80 | 1.2s |
Grid Spinner | #7f58af | true | 80 | 1.2s |
Heart Spinner | #7f58af | true | 80 | 1.2s |
Hourglass Spinner | #7f58af | true | 80 | 1.2s |
Ring Spinner | #7f58af | true | 80 | 1.2s |
Ripple Spinner | #7f58af | true | 80 | 1s |
Roller Spinner | #7f58af | true | 80 | 1.2s |
Spinner Spinner | #7f58af | true | 80 | 1.2s |
Orbitals Spinner | #7f58af | true | 80 | 4s |
Line Spinner | #7f58af | true | 80 | 1.2s |
$ npm i --save vue-spinners-css
Install specific vue spinner component with bit, npm or yarn without having to install the whole project.
Using bit to play with live demo, and try the spinners before install.
set npm regisetry config(one time action):
npm config set '@bit:registry' https://node.bit.dev
and use your favorite package manager:
npm i @bit/joshk.vue-spinners-css.facebook-loader
yarn add @bit/joshk.vue-spinners-css.facebook-loader
bit import joshk.vue-spinners-css/facebook-loader
you can use a random color from jotils
import Vue from 'vue'
import * as VueSpinnersCss from "vue-spinners-css";
Vue.use(VueSpinnersCss)
// Each spinner can now be used in your templates anywhere in the app!
<template>
<FacebookLoader :color="randomcolor" />
<FacebookLoader />
</template>
<script>
//using npm or yarn
import { FacebookLoader } from 'vue-spinners-css';
//using bit
import FacebookLoader from '@bit/joshk.vue-spinners-css.facebook-loader';
import { getRandomColor } from '@bit/joshk.jotils.get-random-color'
export default ({
data: () => ({
randomcolor: getRandomColor()
}),
components: {
FacebookLoader,
}
})
</script>
<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-spinners-css"></script>
<!--Use a component somewhere in your app-->
<div id="app">
<facebook-loader color="blue" />
</div>
<script>
new Vue({ el: '#app', data: { } })
</script>
You can see the components locally by cloning this repo and doing the following steps:
package.json
, run: npm install
.npm run serve
.If you like to support my open-source contributions please star and share this project. 💫
FAQs
[![CircleCI](https://circleci.com/gh/JoshK2/vue-spinners-css.svg?style=svg)](https://circleci.com/gh/JoshK2/vue-spinners-css) [![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponent
The npm package vue-spinners-css receives a total of 433 weekly downloads. As such, vue-spinners-css popularity was classified as not popular.
We found that vue-spinners-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.