{"id":17382059,"url":"https://github.com/vuesence/cloud-sync-button","last_synced_at":"2025-08-30T16:37:36.311Z","repository":{"id":51465399,"uuid":"269394119","full_name":"vuesence/cloud-sync-button","owner":"vuesence","description":"Button / progress-bar with cloud synchronization animation in vanilla javascript, Vue.js and Web component formats","archived":false,"fork":false,"pushed_at":"2023-11-09T04:45:14.000Z","size":774,"stargazers_count":11,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T00:02:01.562Z","etag":null,"topics":["button","cloud","loader","progress-bar","sync","synchronization","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuesence.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-04T15:19:14.000Z","updated_at":"2024-05-17T09:59:19.000Z","dependencies_parsed_at":"2023-12-26T08:45:31.818Z","dependency_job_id":"da7bd488-d6a8-491d-a809-83e17496b99b","html_url":"https://github.com/vuesence/cloud-sync-button","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"814fcbdb515b158d0bcf3448c9b7fa8ba39d182c"},"previous_names":["altrusl/vuesence-cloud-sync-button"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vuesence/cloud-sync-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesence%2Fcloud-sync-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesence%2Fcloud-sync-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesence%2Fcloud-sync-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesence%2Fcloud-sync-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuesence","download_url":"https://codeload.github.com/vuesence/cloud-sync-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuesence%2Fcloud-sync-button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272878209,"owners_count":25008340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","cloud","loader","progress-bar","sync","synchronization","vue"],"created_at":"2024-10-16T07:05:16.957Z","updated_at":"2025-08-30T16:37:36.289Z","avatar_url":"https://github.com/vuesence.png","language":"Vue","readme":"# Cloud Sync Button\n\nButton/progress-bar with cloud synchronization animation in vanilla JavaScript, Vue.js and Web component formats\n\n![VB-preview](https://vuesence.github.io/cloud-sync-button/csb.gif)\n\n# How to use\n\nThis component is available in three versions:\n\n1. Vue.js component - in the `src` directory\n2. Vanilla JavaScript code - in the `vanilla-javascript-version` directory\n3. As a `Web component` - in the `web-component-version` directory\n\n## Vanilla JavaScript version\n\nThe code is self-explanatory\n\n## Web Component version\n\nIt's built using Custom Elements - a well supported technology nowadays. For older browsers a polifill is available\n\n```html\n\u003ccloud-sync-button options='{\n\t\"loadColor\": \"#81d427\",\n\t\"strokeColor\": \"#fff\",\n\t\"btnColor\": \"#725fdf\",\n\t\"titleStart\": \"Sync\",\n\t\"titleEnd\": \"Done\"\n}' /\u003e\n```\n\n```javascript\nconst aBtn = document.querySelector(\"cloud-sync-button\");\n...\naBtn.initSync();\naBtn.updateSync(10);\naBtn.completeSync();\naBtn.resetSync();\n```\n\n## Vue version\n\nVue 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:\n\n```bash\nnpm install @vuesence/cloud-sync-button --save\n```\n\nThen you can use it in the your Vue code:\n\n```html\n\u003ctemplate\u003e\n\t\u003cdiv id=\"app\"\u003e\n\t\t\u003cCloudSyncButton\n\t\t\ttitle=\"Sync\"\n\t\t\ttitleDone=\"Done\"\n\t\t\t@click.native=\"startSync\"\n\t\t\t:syncProgress=\"syncProgress\"\n\t\t\t:inSync=\"inSync\"\n\t\t\t:styling=\"{\n                loadColor: '#81d427',\n                strokeColor: '#fff',\n                btnColor: '#011e4a'\n            }\"\n\t\t/\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\timport CloudSyncButton from \"@vuesence/cloud-sync-button\";\n\n\texport default {\n\t\tname: \"App\",\n\t\tcomponents: {\n\t\t\tCloudSyncButton,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsyncProgress: 0,\n\t\t\t\tinSync: false,\n\t\t\t};\n\t\t},\n\t\tmethods: {\n\t\t\tstartSync() {\n\t\t\t\tthis.syncProgress = 0;\n\t\t\t\tthis.inSync = true;\n\t\t\t},\n\t\t\tstopSync() {\n\t\t\t\tthis.syncProgress = 0;\n\t\t\t\tthis.inSync = false;\n\t\t\t},\n\t\t\tcompleteSync() {\n\t\t\t\tthis.syncProgress = 100;\n\t\t\t\tsetTimeout(() =\u003e {\n\t\t\t\t\tthis.stopSync();\n\t\t\t\t}, 2000);\n\t\t\t},\n\t\t},\n\t};\n\u003c/script\u003e\n```\n\nTwo reactive parameters handle the button state: `inSync` - starts and stops the synchronization,\nand `syncProgress` - shows the synchronization progress.\n\n`startSync`, `stopSync` and `completeSync` methods are used to manage the button representation programmatically.\n\nFor more details please see an example of usage in the `App.vue`\n\n## Demo\n\n\u003ca href=\"https://vuesence.github.io/cloud-sync-button/\" target=\"_blank\"\u003ehttps://vuesence.github.io/cloud-sync-button/\u003c/a\u003e\n\n\u003c!-- \u003e If you like it - star it. Thank you. --\u003e\n\n\n## Playground\n\nTry it on \u003ca href=\"https://codesandbox.io/s/cloud-sync-button-hv9dr\" target=\"_blank\"\u003ecodesandbox.io\u003c/a\u003e\n\n\u003c!-- \u003e ! The version on `codesandbox.io` might be slightly out of date --\u003e\n\n\n## Check out my other Vue.js components\n\n- \u003ca href=\"https://github.com/altrusl/vuesence-book\" target=\"_blank\"\u003eVuesence book\u003c/a\u003e - minimalistic Vue.js based documentation component\n- \u003ca href=\"https://github.com/altrusl/vuesence-sliding-header\" target=\"_blank\"\u003eSliding header\u003c/a\u003e - Vue.js component representing sliding header (or two different headers)\n\u003c!-- - \u003ca href=\"https://github.com/altrusl/vuesence-cloud-sync-button\" target=\"_blank\"\u003eCloud Sync Button\u003c/a\u003e - a button with cloud synchronization animation --\u003e\n- \u003ca href=\"https://github.com/altrusl/vuesence-modal-window\" target=\"_blank\"\u003eModal Window\u003c/a\u003e - simple lightweight Modal Window Vue.js component\n\n\n\u003cimg src=\"https://imgur.com/A92i02A.png\" /\u003e\nYou like Cloud Sync Button? Star it and \u003ca href=\"https://twitter.com/vuesence/status/1280130154090704896?s=20\"\u003eretweet it!\u003c/a\u003e\n\n-------\n\n## Troubleshooting\n\nAny bugs, issues, feature and pull requests are welcome\n\nPlease use GitHub's issue reporter or send me an \u003ca href=\"mailto:ruslan.makarov@gmail.com\"\u003eemail\u003c/a\u003e\n\n\n## Contribution\n\nContribution is always welcome and recommended. Here is how:\n\n-   Fork the repository\n-   Clone to your machine\n-   Make your changes\n-   Create a pull request\n\n## License\n\n**@vuesence/cloud-sync-button** package is freely distributable under the terms of the [MIT license](LICENSE).\n","funding_links":[],"categories":["UI Components"],"sub_categories":["Buttons"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuesence%2Fcloud-sync-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuesence%2Fcloud-sync-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuesence%2Fcloud-sync-button/lists"}