dzwillia / Vue Simple Spinner
Licence: mit
A simple, flexible spinner for Vue.js
Stars: ✭ 385
Projects that are alternatives of or similar to Vue Simple Spinner
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (-55.06%)
Mutual labels: component, progress, spinner
Respin
React SVG loading spinner based on jxnblk.com/loading
Stars: ✭ 21 (-94.55%)
Mutual labels: component, spinner
React Awesome Button
React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱
Stars: ✭ 943 (+144.94%)
Mutual labels: component, progress
Scrollprogress
🛸 Light weight library to observe the viewport scroll position
Stars: ✭ 148 (-61.56%)
Mutual labels: component, progress
React Progress Button
🌀 Simple react.js component for an inline progress indicator
Stars: ✭ 516 (+34.03%)
Mutual labels: component, progress
Vue Step Progress
A simple Vue component that displays a Progress Bar with labels for each step
Stars: ✭ 26 (-93.25%)
Mutual labels: component, progress
React Native Really Awesome Button
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱
Stars: ✭ 988 (+156.62%)
Mutual labels: component, progress
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+385.45%)
Mutual labels: progress, spinner
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (-39.22%)
Mutual labels: component, spinner
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-94.55%)
Mutual labels: progress, spinner
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (-34.03%)
Mutual labels: progress, spinner
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: ✭ 2,940 (+663.64%)
Mutual labels: progress, spinner
Awloader
AWLoader is a UI Component that allows you to integrate loader that fits your needs within your app.
Stars: ✭ 11 (-97.14%)
Mutual labels: component, progress
Apesuperhud
A simple way to display a HUD with a message or progress information in your application.
Stars: ✭ 156 (-59.48%)
Mutual labels: progress, spinner
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-71.17%)
Mutual labels: progress, spinner
Fliplog
fluent logging with verbose insight, colors, tables, emoji, filtering, spinners, progress bars, timestamps, capturing, stack traces, tracking, presets, & more...
Stars: ✭ 41 (-89.35%)
Mutual labels: progress, spinner
Swiftloader
A simple and beautiful activity indicator written in Swift
Stars: ✭ 116 (-69.87%)
Mutual labels: progress, spinner
React Native Input Spinner
An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.
Stars: ✭ 155 (-59.74%)
Mutual labels: component, spinner
react-redux-spinner
An automatic spinner for react and redux
Stars: ✭ 81 (-78.96%)
Mutual labels: progress, spinner
vue-simple-spinner
A simple, flexible spinner for Vue.js
vue-simple-spinner is designed to be a lightweight Vue.js spinner requiring minimal configuration.
Documentation
https://github.com/dzwillia/vue-simple-spinner/
Demo
https://dzwillia.github.io/vue-simple-spinner/examples
Requirements
- Vue.js (^v2.1.4)
Browser support
IE 10+ (due to CSS animation support).
Installation
NPM
npm install vue-simple-spinner --save
Usage
All styling for this component is done via computed styles in the
Spinner.vuecomponent and requires no external CSS files.
ES6
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
import Vue from 'vue'
import Spinner from 'vue-simple-spinner'
new Vue({
components: {
Spinner
}
})
Globals (script tag)
Add a script tag pointing to dist/vue-simple-spinner.min.js after adding Vue.
Example:
<html>
<head>
...
</head>
<body>
<div id="app">
<vue-simple-spinner></vue-simple-spinner>
</div>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-simple-spinner.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
Examples
Medium size
<vue-simple-spinner size="medium" />
Custom line color
<vue-simple-spinner line-fg-color="#009900" />
Custom font size and message
<vue-simple-spinner spacing="55" message="I'm 55px below the vue-simple-spinner" />
More live code examples on JSFiddle
Options
| Props | Type | Values | Default |
|---|---|---|---|
| size | Number | String | tiny, small, medium, large, huge, massive, {n} | 32 |
| line-size | Number | Any Number | 3 |
| line-bg-color | String | Color | #eee |
| line-fg-color | String | Color | #2196f3 |
| speed | Number | Number (in seconds) | 0.8 |
| spacing | Number | Number (in pixels) | 4 |
| message | String | Text to display | (empty string) |
| font-size | Number | Number (in pixels) | 13 |
| text-fg-color | String | Color | #555 |
License
vue-simple-spinner is open source and released under the MIT License.
Copyright (c) 2017 David Z Williams.
PS: I would love to know if you're using vue-simple-spinner. Tweet to me at @padredaveo.
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].