VueJS Examples

Best VueJS Progress Button Components

A curated list of the best Progress Button libraries.

1. vue-submit

A pure Vue component submit button with a Ladda-style spinner.

Based on NxtChg/pieces vue-submit but with a different approach, using vue-cli 3 and published as a component, plugin and vue cli 3 plugin.

Step 1: Installation

Using npm:

$ npm install vue-submit

Step 2: Usage

Using Vue (with Webpack) in your src/main.js or other webpack entry file:

// Load the Vue plugin globally to compile via Babel in Webpack (using vue-cli-3).
import Vue from 'vue'
import { Plugin } from 'vue-submit'

// To use the default options: { defaultButtonType = 'submit', tagName = 'vue-submit' }
Vue.use(Plugin)

// Or choose a different tag name for the component
Vue.use(Plugin, { tagName: 'an-alternative-vue-submit-tag-name' })

// Or choose the default button type for the button created. By default this is 'submit',
//  but you may want 'button' to use the spin functionality without submitting a form
Vue.use(Plugin, { defaultButtonType: 'button' })

And in your SFC (with the plugin activated):

<template>
    <vue-submit :disabled='disabled'>A disabled button</vue-submit>
    <vue-submit type='button' :disabled='disabled'>A disabled button that behaves like a normal button instead of a submit button</vue-submit>

    <form method='GET' @submit.prevent='onSubmitDummy'>
        <vue-submit :started='siblingStarted' @started='siblingStarted=true'> {{ siblingStopPrimaryText }}</vue-submit>
        <button type='button' :disabled='!siblingStarted' @click='onSiblingStop'> {{ siblingStopSecondaryText }}</button>
    <form>
</template>

<script>
export default {
    data() {
        return {
            disabled: true,
            siblingStarted: false,
            siblingStopPrimaryText: 'Click to confide in me',
            siblingStopSecondaryText: 'Waiting for my sibling to start spinning'
        }
    }.
    watch: {
        siblingStarted(started) {
        if (started) {
            this.siblingStopPrimaryText = "I'm spinning around, get out of my way!"
            this.siblingStopSecondaryText = 'Click me to stop my sibling'
        } else {
            this.siblingStopPrimaryText = 'Click to confide in me'
            this.siblingStopSecondaryText = 'Waiting for my sibling to start spinning'
        }
        }
    },
    methods: {
        onSubmitDummy() {
            // a dummy function to prevent actual form submission
        },
        onSiblingStop() {
            this.siblingStarted = false
        }
    }
}
</script>

Or to use in your SFC as above, but with the component and not the plugin:

<template>
 ...
</template>

<script>
import VueSubmit from 'vue-submit'

export default {
    ...,
    components: {
        'vue-submit': VueSubmit
    }
}
</script>

Read more


2. vuesence-cloud-sync-button

Cloud Sync Button.

Button/progress-bar with cloud synchronization animation in vanilla JavaScript, Vue.js and Web component formats

VB-preview

How to use

This component is available in three versions:

  1. Vue.js component - in the src directory
  2. Vanilla JavaScript code - in the vanilla-javascript-version directory
  3. As a Web component - in the web-component-version directory

Vanilla JavaScript version

The code is self-explanatory

Web Component version

It's built using Custom Elements - a well supported technology nowadays. For older browsers a polifill is available

<cloud-sync-button options='{
    "loadColor": "#81d427",
    "strokeColor": "#fff",
    "btnColor": "#725fdf",
    "titleStart": "Sync",
    "titleEnd": "Done"
}' />
const aBtn = document.querySelector("cloud-sync-button");
...
aBtn.initSync();
aBtn.updateSync(10);
aBtn.completeSync();
aBtn.resetSync();

Vue version

Vue component consists of one CloudSyncButton.vue file that can be copy-pasted into your Vue.js project or can be plugged in as an NPM package:

npm install @vuesence/cloud-sync-button --save

Then you can use it in the your Vue code:

<template>
    <div id="app">
        <CloudSyncButton
            title="Sync"
            titleDone="Done"
            @click.native="startSync"
            :syncProgress="syncProgress"
            :inSync="inSync"
            :styling="{
                loadColor: '#81d427',
                strokeColor: '#fff',
                btnColor: '#011e4a'
            }"
        />
    </div>
</template>

<script>
    import CloudSyncButton from "@vuesence/cloud-sync-button";

    export default {
        name: "App",
        components: {
            CloudSyncButton,
        },
        data() {
            return {
                syncProgress: 0,
                inSync: false,
            };
        },
        methods: {
            startSync() {
                this.syncProgress = 0;
                this.inSync = true;
            },
            stopSync() {
                this.syncProgress = 0;
                this.inSync = false;
            },
            completeSync() {
                this.syncProgress = 100;
                setTimeout(() => {
                    this.stopSync();
                }, 2000);
            },
        },
    };
</script>

Two reactive parameters handle the button state: inSync - starts and stops the synchronization,
and syncProgress - shows the synchronization progress.

startSync, stopSync and completeSync methods are used to manage the button representation programmatically.

For more details please see an example of usage in the App.vue

Read more


3. e-circle-progress

A beautiful progress button components with vue.

Build Setup

# install dependencies
npm install
# If npm installation is slow, you can usenpm install --registry=https://registry.npm.taobao.org 推荐

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

examples

imgs

demos

use

You can directly use js and write the corresponding custom tag after importing. For details, please refer to the abovedemos

 <script src="https://unpkg.com/e-circle-progress"></script>
<e-circle-progress :during="20" :pv="pv1"  color="#f01250" ></e-circle-progress>
<e-circle-progress :during="10" :pv="pv2" color="#f00" :font-size="40" :width="100"  text-color="#68d7c6"></e-circle-progress>
<e-circle-progress :during="10" :pv="pv3"  :font-size="100" :width="200"  text-color="#898579" text-bg-color="#fff" :bold="20" color="#fd625e"></e-circle-progress>
<e-circle-progress :during="10" :pv="99"  :width="150"  text-color="#898579" text-bg-color="#fff" :bold="5" color="#f01250"></e-circle-progress>
  1. vue single file format

  // You can use it by directly importing the corresponding components in the vue single file
  import eCircleProgress from 'e-circle-progress';

  //components:{eCircleProgress}
  // html
  <e-circle-progress :during="10" :pv="pv2" color="#f00" :font-size="40" :width="100"  text-color="#68d7c6"></e-circle-progress>

Read more


4. vue-progress-button

A simple button that displays progress. Compatible with Vue 2.x

Inspired by the button animations displayed on https://tympanus.net/Development/ProgressButtonStyles/

Step 1: Install

$ npm install vue-progress-button --save

Step 2: Usage

Inside your component:

To get the most basic version of a progress button:

<progress-button>Button</progress-button>

The progress can be configured with another filling color. Simply add the fill-color property to the progress button element and give a color to it.

<progress-button name="fillColor" class="btn btn-primary mr-1 mb-1" fill-color="#fff">Other fill color</progress-button>

The progress also be modified in terms of duration of the progress, position of the progress line

<progress-button name="duration" class="btn btn-info mr-1 mb-1" :duration="10000">10 second animation</progress-button>
<progress-button name="bottom" class="btn btn-success mr-1 mb-1" :height="5" position="bottom">Bottom fill</progress-button>
<progress-button name="bottom" class="btn btn-warning mr-1 mb-1" :height="5" position="top">Top fill</progress-button>
import Button from 'vue-progress-button'

export default {
  components: {
    'progress-button': Button
  }
}

Read more


Related Posts