Button/progress-bar with cloud synchronization animation in vanilla JavaScript, Vue.js and Web component formats
npm install @vuesence/cloud-sync-buttonButton/progress-bar with cloud synchronization animation in vanilla JavaScript, Vue.js and Web component formats
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
The code is self-explanatory
It's built using Custom Elements - a well supported technology nowadays. For older browsers a polifill is available
``html`
`javascript`
const aBtn = document.querySelector("cloud-sync-button");
...
aBtn.initSync();
aBtn.updateSync(10);
aBtn.completeSync();
aBtn.resetSync();
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:
`bash`
npm install @vuesence/cloud-sync-button --save
Then you can use it in the your Vue code:
`html
titleDone="Done"
@click.native="startSync"
:syncProgress="syncProgress"
:inSync="inSync"
:styling="{
loadColor: '#81d427',
strokeColor: '#fff',
btnColor: '#011e4a'
}"
/>
`
Two reactive parameters handle the button state: inSync - starts and stops the synchronization,syncProgress
and - 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
https://vuesence.github.io/cloud-sync-button/
Try it on codesandbox.io
- Vuesence book - minimalistic Vue.js based documentation component
- Sliding header - Vue.js component representing sliding header (or two different headers)
- Modal Window - simple lightweight Modal Window Vue.js component

You like Cloud Sync Button? Star it and retweet it!
-------
Any bugs, issues, feature and pull requests are welcome
Please use GitHub's issue reporter or send me an email
Contribution is always welcome and recommended. Here is how:
- Fork the repository
- Clone to your machine
- Make your changes
- Create a pull request
@vuesence/cloud-sync-button package is freely distributable under the terms of the MIT license.