{"id":20279311,"url":"https://github.com/mrastiak/vue-loading-checkbox","last_synced_at":"2026-01-11T23:58:03.073Z","repository":{"id":96381089,"uuid":"157085095","full_name":"mrastiak/vue-loading-checkbox","owner":"mrastiak","description":"A highly customizable Vue.js checkbox UI component with loading state","archived":false,"fork":false,"pushed_at":"2019-01-13T11:00:21.000Z","size":807,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-29T03:12:38.309Z","etag":null,"topics":[],"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/mrastiak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2018-11-11T14:01:24.000Z","updated_at":"2022-12-22T19:18:29.000Z","dependencies_parsed_at":"2024-01-07T12:56:51.319Z","dependency_job_id":"a693ba11-2a13-4b94-9f9c-7d77617fa0ff","html_url":"https://github.com/mrastiak/vue-loading-checkbox","commit_stats":null,"previous_names":["carrene/vue-loading-checkbox"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrastiak%2Fvue-loading-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrastiak%2Fvue-loading-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrastiak%2Fvue-loading-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrastiak%2Fvue-loading-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrastiak","download_url":"https://codeload.github.com/mrastiak/vue-loading-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241773259,"owners_count":20018064,"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-14T13:29:28.098Z","updated_at":"2026-01-11T23:58:03.045Z","avatar_url":"https://github.com/mrastiak.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://github.com/Carrene/vue-loading-checkbox/blob/master/src/assets/checkbox-demo.gif?raw=true\" alt=\"vue-loading-checkbox\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\" \u003evue-loading-checkbox\u003c/h1\u003e\n\n\u003cp align=\"center\" class=\"badges\" \u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-loading-checkbox\"\u003e\u003cimg src=\"https://badge.fury.io/js/vue-loading-checkbox.svg\" alt=\"npm version\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA vue UI component for loading checkbox\n\n## How to install\n\n```\nnpm install vue-loading-checkbox --save\n```\n\n## How to use\n\nInside your `.vue` files\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"your-component\"\u003e\n    \u003c!-- Using Component --\u003e\n    \u003cloading-checkbox\n      :checked=\"checked\"\n      :loading=\"loading\"\n      label=\"Title of checkbox\"\n      @click.native=\"toggleStatus\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n// Importing Component and style\nimport LoadingCheckbox from 'vue-loading-checkbox'\nimport 'vue-loading-checkbox/dist/LoadingCheckbox.css'\n\nexport default {\n  name: 'YourComponentName',\n  data() {\n    return {\n      checked: false,\n      loading: false\n    }\n  },\n  methods: {\n    toggleStatus() {\n      this.loading = true\n      setTimeout(() =\u003e {\n        this.loading = false\n        this.checked = !this.checked\n      }, 2000)\n    }\n  },\n  components: {\n    LoadingCheckbox // Registering Component\n  }\n}\n\u003c/script\u003e\n```\n\n## Component props\n\n| prop                       | description                                                                         | default                             |\n| -------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------- |\n| `borderColor`              | Color of checkbox border                                                            | `black`                             |\n| `borderRadius`             | Border radius of checkbox                                                           | `0`                                 |\n| `borderStyle`              | Style of checkbox border, (solid, dashed, dotted, ...)                              | `solid`                             |\n| `borderWidth`              | width of checkbox border. You have to insert unit (`px`,`em`...)                    | `1px`                               |\n| `checkColor`               | Color of check mark                                                                 | `white`                             |\n| `checked`                  | Status of component. can be `true`(checked) or `false`(unchecked)                   | `false`                             |\n| `checkedBackgroundColor`   | Background color of checkbox when status is checked                                 | `gray`                              |\n| `checkedBorderColor`       | Border color of checkbox when status is checked                                     | `null` (same as `borderColor`)      |\n| `checkedBorderRadius`      | Border radius of checkbox when status is checked                                    | `null` (same as `borderRadius`)     |\n| `checkedBorderStyle`       | Border style of checkbox when status is checked                                     | `null` (same as `borderStyle`)      |\n| `checkedBorderWidth`       | Border width of checkbox when status is checked                                     | `null` (same as `borderWidth`)      |\n| `checkIcon`                | Custom check mark image (.svg, png, etc). you have to pass it with require function | `null` A default pure css check     |\n| `checkIconPadding`         | Padding of the given custom check mark image (This will not affect the `size`)      | `null`                              |\n| `fontColor`                | Text color of label                                                                 | `black`                             |\n| `fontSize`                 | Font size of label                                                                  | `null` (calculated based on `size`) |\n| `gap`                      | Gap size between checkbox and its label in `px`.                                    | `null` (calculated based on `size`) |\n| `label`                    | Label of checkbox                                                                   | `null` (no label)                   |\n| `loading`                  | If `true` component is in loading state. it has a higher priority than `checked`    | `false`                             |\n| `loadingBackgroundColor`   | Background color of checkbox when status is loading                                 | `white`                             |\n| `loadingBorderColor`       | Border color of checkbox when status is loading                                     | `null` (same as `borderColor`)      |\n| `loadingBorderRadius`      | Border radius of checkbox when status is loading                                    | `null` (same as `borderRadius`)     |\n| `loadingBorderStyle`       | Border style of checkbox when status is loading                                     | `null` (same as `borderStyle`)      |\n| `loadingBorderWidth`       | Border width of checkbox when status is loading                                     | `null` (same as `borderWidth`)      |\n| `size`                     | Size of component in `px`.                                                          | `30`                                |\n| `spinnerColor`             | Color of spinner                                                                    | `black`                             |\n| `spinnerRingColor`         | Color of loading ring                                                               | `lightgray`                         |\n| `uncheckedBackgroundColor` | Background color of checkbox when status is unchecked                               | `white`                             |\n| `uncheckedBorderColor`     | Border color of checkbox when status is unchecked                                   | `null` (same as `borderColor`)      |\n| `uncheckedBorderRadius`    | Border radius of checkbox when status is unchecked                                  | `null` (same as `borderRadius`)     |\n| `uncheckedBorderStyle`     | Border style of checkbox when status is unchecked                                   | `null` (same as `borderStyle`)      |\n| `uncheckedBorderWidth`     | Border width of checkbox when status is unchecked                                   | `null` (same as `borderWidth`)      |\n\n:warning: Warning: You have to v-bind custom icon path with `require` function:\n\n`v-bind:checkIcon=\"require(@/assets/path/to/icon.svg)\"` :heavy_check_mark:\n\n`:checkIcon=\"require(@/assets/path/to/icon.svg)\"` :heavy_check_mark:\n\n`checkIcon=\"@/assets/path/to/icon.svg\"` :x:\n\n`checkIcon=\"require(@/assets/path/to/icon.svg)\"` :x:\n\n## Contributing\n\nVisit [CONTRIBUTING Page](https://github.com/Carrene/vue-loading-checkbox/blob/master/CONTRIBUTING.md)\n\n## Project setup\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n\n```\nnpm run build-bundle\n```\n\n### Lints and fixes files\n\n```\nnpm run lint\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrastiak%2Fvue-loading-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrastiak%2Fvue-loading-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrastiak%2Fvue-loading-checkbox/lists"}