All Projects → JoshK2 → vue-spinners-css

JoshK2 / vue-spinners-css

Licence: MIT License
Amazing collection of Vue spinners components with pure css.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to vue-spinners-css

React Spinners Css
Amazing collection of React spinners components with pure css
Stars: ✭ 232 (+364%)
Mutual labels:  progress, animations, spinners
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: ✭ 2,940 (+5780%)
Mutual labels:  progress, animations, spinners
Epic Spinners
Easy to use css spinners collection with Vue.js integration
Stars: ✭ 3,548 (+6996%)
Mutual labels:  vue-components, animations, vue-spinner-component
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (+192%)
Mutual labels:  progress, spinners, loaders
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+3638%)
Mutual labels:  progress, vue-components, loaders
Vue Spinners
💫 A collection of loading spinner components for Vuejs
Stars: ✭ 255 (+410%)
Mutual labels:  vue-components, spinners
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+1448%)
Mutual labels:  progress, spinners
Zwmusicdownloadview
精仿唱吧App音乐下载进度按钮,完美快速集成使用(A beautiful musical download progress button which can show the progress and click to play Music after finishing)
Stars: ✭ 88 (+76%)
Mutual labels:  progress, animations
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (+154%)
Mutual labels:  progress, vue-components
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (+212%)
Mutual labels:  progress, vue-components
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-58%)
Mutual labels:  progress, spinners
React Native Animated Spinkit
A collection of loading indicators for React Native
Stars: ✭ 186 (+272%)
Mutual labels:  animations, spinners
react-native-animated-loader
🍭 A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.
Stars: ✭ 165 (+230%)
Mutual labels:  spinners, loaders
react-rounder
A collection of rounding components based on styled-components
Stars: ✭ 69 (+38%)
Mutual labels:  spinners, loaders
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+408%)
Mutual labels:  progress, spinners
SVGLoadersPack-Android
Android SVGLoadersPack - SVG animations and Loaders in Android
Stars: ✭ 27 (-46%)
Mutual labels:  animations, loaders
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (+122%)
Mutual labels:  progress, spinners
pagination
No description or website provided.
Stars: ✭ 14 (-72%)
Mutual labels:  vue-components
progress-image-view-android
Simple progress with ImageView android
Stars: ✭ 64 (+28%)
Mutual labels:  progress
vue-native-scroll
native scroll base vue. 原生滚动插件
Stars: ✭ 14 (-72%)
Mutual labels:  vue-components

Vue Spinners CSS Loaders (React, Angular)

CircleCI bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow

Amazing collection of Vue spinners components with pure css.
The Vue spinners are based on loading.io and from all over the web.

  • 💅No extra CSS imports
  • ✂️Zero dependencies
  • 📦Spinners can be installing separately

Live Demo

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

🚀 List of Spinners - PropTypes and Default Props

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

📦 Installation

Using npm to install vue-spinners-css:

$ npm i --save vue-spinners-css

Play and install vue spinners with Bit

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 

💻 Usage Examples

you can use a random color from jotils

Vue Global Registration

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!

Vue Local Registration

<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>

Unpkg Import

<!--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>

👾 Development

You can see the components locally by cloning this repo and doing the following steps:

  • Install dependencies from package.json, run: npm install.
  • Run the app in the development mode, run: npm run serve.

⌨️ Contributing

  • Pull requests and stars are always welcome.
  • For bugs and feature requests, please create an issue.

👏🏻 Support my open-source

If you like to support my open-source contributions please star and share this project. 💫

📄 License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].