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

Demo

https://altrusl.github.io/vuesence-cloud-sync-button/

Playground

Try it on codesandbox.io

<!– > ! The version on codesandbox.io might be slightly out of date –>

Check out my other Vue.js components

  • Vuesence book – minimalistic Vue.js based documentation component
  • Sliding header – Vue.js component representing sliding header (or two different headers)
    <!– – Cloud Sync Button – a button with cloud synchronization animation –>
  • Modal Window – simple lightweight Modal Window Vue.js component

You like Cloud Sync Button? Star it and retweet it!

License

strong>@vuesence/cloud-sync-button</strong package is freely distributable under the terms of the MIT license.

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.