Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuesence/cloud-sync-button
Button / progress-bar with cloud synchronization animation in vanilla javascript, Vue.js and Web component formats
https://github.com/vuesence/cloud-sync-button
button cloud loader progress-bar sync synchronization vue
Last synced: about 2 months ago
JSON representation
Button / progress-bar with cloud synchronization animation in vanilla javascript, Vue.js and Web component formats
- Host: GitHub
- URL: https://github.com/vuesence/cloud-sync-button
- Owner: vuesence
- License: mit
- Created: 2020-06-04T15:19:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-09T04:45:14.000Z (about 1 year ago)
- Last Synced: 2024-05-29T11:19:27.714Z (7 months ago)
- Topics: button, cloud, loader, progress-bar, sync, synchronization, vue
- Language: Vue
- Homepage:
- Size: 756 KB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-JavaScript-Libraries - **Cloud Sync Button** - bar with cloud synchronization animation in vanilla JavaScript, Vue.js, and Web component formats. | Vue.js | (UI Components / Buttons)
README
# Cloud Sync Button
Button/progress-bar with cloud synchronization animation in vanilla JavaScript, Vue.js and Web component formats
# 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
```html
```
```javascript
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:
```bash
npm install @vuesence/cloud-sync-button --save
```
Then you can use it in the your Vue code:
```html
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);
},
},
};
```
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://vuesence.github.io/cloud-sync-button/
## Playground
Try it on codesandbox.io
## 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)
- Modal Window - simple lightweight Modal Window Vue.js component
You like Cloud Sync Button? Star it and retweet it!
-------
## Troubleshooting
Any bugs, issues, feature and pull requests are welcome
Please use GitHub's issue reporter or send me an email
## Contribution
Contribution is always welcome and recommended. Here is how:
- Fork the repository
- Clone to your machine
- Make your changes
- Create a pull request
## License
**@vuesence/cloud-sync-button** package is freely distributable under the terms of the [MIT license](LICENSE).