Akryum / Vue Progress Path
Progress bars and loading indicators for Vue.js
Stars: ✭ 309
Projects that are alternatives of or similar to Vue Progress Path
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-64.08%)
Mutual labels: spinner, loading-bar, loading-spinner
Ng4 Loading Spinner
Angular 4 custom async loading spinner.
Stars: ✭ 74 (-76.05%)
Mutual labels: spinner, loading-spinner, loading-bar
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+150.49%)
Mutual labels: spinner, loading-spinner, loading-bar
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: ✭ 27 (-91.26%)
Mutual labels: spinner, loading-bar
Ngx Spinner
A library for loading spinner for Angular 4/5/6/7/8/9/10.
Stars: ✭ 545 (+76.38%)
Mutual labels: spinner, loading-spinner
Respin
React SVG loading spinner based on jxnblk.com/loading
Stars: ✭ 21 (-93.2%)
Mutual labels: spinner, loading-spinner
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (-24.27%)
Mutual labels: spinner, vuejs2
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (-17.8%)
Mutual labels: spinner, loading-spinner
Vue Full Loading
Full overlay loading with spinner for Vue
Stars: ✭ 148 (-52.1%)
Mutual labels: spinner, vuejs2
respinner
Pretty and customizable svg spinners for React.js
Stars: ✭ 89 (-71.2%)
Mutual labels: spinner, loading-spinner
react-native-spinner-button
React Native button component with multiple animated spinners
Stars: ✭ 105 (-66.02%)
Mutual labels: spinner, loading-spinner
cpp-indicators
A very simple, easy-to-use, and single-header-only C++ library for console based indicators (loading spinners)
Stars: ✭ 13 (-95.79%)
Mutual labels: spinner, loading-spinner
Epic Spinners
Easy to use css spinners collection with Vue.js integration
Stars: ✭ 3,548 (+1048.22%)
Mutual labels: spinner, loading-spinner
Iprogresshud
An elegant, lightweight and responsive progress HUD for iOS app with very simple usage. Available 32 indicators by NVActivityIndicatorView.
Stars: ✭ 66 (-78.64%)
Mutual labels: loading-spinner, loading-bar
React Epic Spinners
Reusable react components for epic-spinners
Stars: ✭ 280 (-9.39%)
Mutual labels: spinner, loading-spinner
loading
Laravel package to add loading indicator to pages while page is loading.
Stars: ✭ 38 (-87.7%)
Mutual labels: spinner, loading-spinner
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (-75.4%)
Mutual labels: spinner, loading-spinner
material-circular-loader
Material Circular Loader in SCSS like a boss. Demo: http://codepen.io/YuRen/details/KdKKax
Stars: ✭ 13 (-95.79%)
Mutual labels: spinner, loading-spinner
Mui Vue2
mui+mint+vue2.x+vue-router+vuex+webpack最终打包成原生apk的app项目,样式使用vue移动端mint ui框架，原生手机能力偏重于mui框架，欢迎star！
Stars: ✭ 278 (-10.03%)
Mutual labels: vuejs2
Vue Highlightjs
Syntax highlighting with highlight.js for Vue.js 2.x
Stars: ✭ 295 (-4.53%)
Mutual labels: vuejs2
vue-progress-path
Progress bars and loading indicators that can take any form!
This library is Work In Progress.
Sponsors
Gold
Silver
Bronze
Installation
npm i -S vue-progress-path
yarn add vue-progress-path
Usage
import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'
Vue.use(VueProgress, {
// defaultShape: 'circle',
})
You can now use the <loading-progress> component.
CSS customization example
You can customize the progress components with CSS:
.vue-progress-path path {
stroke-width: 12;
}
.vue-progress-path .progress {
stroke: red;
}
.vue-progress-path .background {
stroke: #edd;
}
Examples
Google Material Design-like spinner:
<loading-progress
:progress="progress"
:indeterminate="indeterminate"
:counter-clockwise="counterClockwise"
:hide-background="hideBackground"
size="64"
rotate
fillDuration="2"
rotationDuration="1"
/>
Semi-circle:
<loading-progress
:progress="progress"
:indeterminate="indeterminate"
:counter-clockwise="counterClockwise"
:hide-background="hideBackground"
shape="semicircle"
size="64"
/>
Custom SVG path:
<loading-progress
:progress="progress"
:indeterminate="indeterminate"
:counter-clockwise="counterClockwise"
:hide-background="hideBackground"
shape="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
size="180"
fill-duration="2"
/>
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].