{"id":21828993,"url":"https://github.com/zcfan/vue-ladda","last_synced_at":"2025-04-14T05:50:59.718Z","repository":{"id":20474560,"uuid":"89980884","full_name":"zcfan/vue-ladda","owner":"zcfan","description":"vue wrapper for https://github.com/hakimel/Ladda","archived":false,"fork":false,"pushed_at":"2022-12-07T23:28:50.000Z","size":680,"stargazers_count":7,"open_issues_count":15,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T21:50:38.046Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zcfan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-02T01:59:32.000Z","updated_at":"2021-03-09T12:03:12.000Z","dependencies_parsed_at":"2023-01-11T20:51:37.817Z","dependency_job_id":null,"html_url":"https://github.com/zcfan/vue-ladda","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcfan%2Fvue-ladda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcfan%2Fvue-ladda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcfan%2Fvue-ladda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcfan%2Fvue-ladda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcfan","download_url":"https://codeload.github.com/zcfan/vue-ladda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830389,"owners_count":21168272,"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","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":[],"created_at":"2024-11-27T18:19:47.637Z","updated_at":"2025-04-14T05:50:59.696Z","avatar_url":"https://github.com/zcfan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ladda\n\nA vue wrapper for https://github.com/hakimel/Ladda .\n\n[Demo](http://blog.alanslab.space/vue-ladda/)\n\n[Demo source code](docs/index.html)\n\n## Installation\n\n### Direct Download / CDN\n\n[https://unpkg.com/vue-ladda/dist/vue-ladda.js](https://unpkg.com/vue-ladda/dist/vue-ladda.js)\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-ladda\"\u003e\u003c/script\u003e\n```\n\nThen you can use it in this way:\n\n```html\n\u003cvue-ladda ...\u003e...\u003c/vue-ladda\u003e\n```\n\n### NPM\n\n```bash\nnpm install vue-ladda\n```\n\n```javascript\nimport VueLadda from 'vue-ladda'\n\n// or import the vue single file component, if you set vue-loader, sass-loader and babel properly.\nimport VueLadda from 'vue-ladda/src/vue-ladda.vue'\n\n// then register it globally\nVue.component('vue-ladda', VueLadda)\n\n// or locally\nvar Child = {\n  template: '\u003cvue-ladda\u003eClick Me!\u003c/vue-ladda\u003e'\n}\nnew Vue({\n  // ...\n  components: {\n    // \u003cmy-component\u003e will only be available in parent's template\n    'vue-ladda': VueLadda\n  }\n})\n```\n\n## How to use\n\n- Use default slot to give button label: (Default label is \"Submit\")\n\n    ```html\n    \u003cvue-ladda\u003eConfirm\u003c/vue-ladda\u003e\n    ```\n\n- Use `buttonClass` prop to specify your own CSS classes: (Default is \"ladda-class\")\n    ie. you can use Bootstrap button classes\n\n    ```html\n    \u003cvue-ladda button-class=\"btn btn-primary\"\u003eYes!\u003c/vue-ladda\u003e\n    ```\n\n- Use `data-style` prop to specify animation:\n\n    ```html\n    \u003cvue-ladda data-style=\"expand-left|contract|zoom-in|slide-left\"\u003e\n      ...\n    \u003c/vue-ladda\u003e\n    ```\n\n    Visit [http://lab.hakim.se/ladda/](http://lab.hakim.se/ladda/) to get a full options of data-style.\n\n- Use `loading` prop to control button status:\n\n    ```html\n    \u003cvue-ladda loading=\"true|false\"\u003e...\u003c/vue-ladda\u003e\n    ```\n\n- Use `progress` prop to control the ladda built-in progress bar. (0 to 1)\n\n    ```html\n    \u003cvue-ladda :progress=\"0-1\"\u003e...\u003c/vue-ladda\u003e\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcfan%2Fvue-ladda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcfan%2Fvue-ladda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcfan%2Fvue-ladda/lists"}