{"id":16962025,"url":"https://github.com/wangdahoo/vue-progress","last_synced_at":"2025-03-17T08:37:36.848Z","repository":{"id":89195877,"uuid":"86349393","full_name":"wangdahoo/vue-progress","owner":"wangdahoo","description":"https://wangdahoo.github.io/vue-progress","archived":false,"fork":false,"pushed_at":"2020-07-20T05:02:09.000Z","size":844,"stargazers_count":161,"open_issues_count":14,"forks_count":39,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T21:39:31.990Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/wangdahoo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-27T15:03:30.000Z","updated_at":"2025-01-18T13:07:23.000Z","dependencies_parsed_at":"2023-03-29T20:33:58.750Z","dependency_job_id":null,"html_url":"https://github.com/wangdahoo/vue-progress","commit_stats":{"total_commits":13,"total_committers":3,"mean_commits":4.333333333333333,"dds":0.3076923076923077,"last_synced_commit":"ed8e7041b9ee407f49b64272dc21e59c2cba20ae"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangdahoo","download_url":"https://codeload.github.com/wangdahoo/vue-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243852499,"owners_count":20358271,"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-10-13T23:05:00.458Z","updated_at":"2025-03-17T08:37:36.830Z","avatar_url":"https://github.com/wangdahoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-progress\n\n\u003e Progressbar.js as a Vue Component\n\n## How to use\n\n### install\n\n```bash\nnpm i vue-progress -S\n```\n\n### import as a vue plugin\n\n```js\nimport VueProgress from 'vue-progress'\nVue.use(VueProgress)\n```\n\n### hello `\u003cprogress-bar\u003e`\n```html\n\u003ctemplate\u003e\n  \u003cprogress-bar type=\"line\" ref=\"line\" :options=\"options\"\u003e\u003c/progress-bar\u003e\n\n  \u003c!-- or --\u003e\n  \u003c!-- \u003cprogress-bar type=\"line\" ref=\"line\" color=\"#007AFF\" strokeWidth=\"0.5\"\u003e\u003c/progress-bar\u003e --\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data: {\n      options: {\n        color: '#007AFF',\n        strokeWidth: 0.5\n      }\n    },\n    mounted: function () {\n      this.$refs.line.animate(1.0)\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  html, body {\n    margin: 0;\n    padding: 0;\n  }\n\u003c/style\u003e\n```\n\n## ProgressBar component attributes\n\n#### `type`: type of path `line`, `circle`, `custom`\n#### `options`: Options for path drawing.\n\n```js\n{\n  // Stroke color.\n  // Default: '#555'\n  color: '#3a3a3a',\n\n  // Width of the stroke.\n  // Unit is percentage of SVG canvas' size.\n  // Default: 1.0\n  // NOTE: In Line shape, you should control\n  // the stroke width by setting container's height.\n  // WARNING: IE doesn't support values over 6, see this bug:\n  //          https://github.com/kimmobrunfeldt/progressbar.js/issues/79\n  strokeWidth: 2.1,\n\n  // If trail options are not defined, trail won't be drawn\n\n  // Color for lighter trail stroke\n  // underneath the actual progress path.\n  // Default: '#eee'\n  trailColor: '#f4f4f4',\n\n  // Width of the trail stroke. Trail is always centered relative to\n  // actual progress path.\n  // Default: same as strokeWidth\n  trailWidth: 0.8,\n\n  // Inline CSS styles for the created SVG element\n  // Set null to disable all default styles.\n  // You can disable individual defaults by setting them to `null`\n  // If you specify anything in this object, none of the default styles\n  // apply\n  svgStyle: {\n    display: 'block',\n\n    // Important: make sure that your container has same\n    // aspect ratio as the SVG canvas. See SVG canvas sizes above.\n    width: '100%'\n  },\n\n  // Text options. Text element is a \u003cp\u003e element appended to container\n  // You can add CSS rules for the text element with the className\n  // NOTE: When text is set, 'position: relative' will be set to the\n  // container for centering. You can also prevent all default inline\n  // styles with 'text.style: null'\n  // Default: null\n  text: {\n    // Initial value for text.\n    // Default: null\n    value: 'Text',\n\n    // Class name for text element.\n    // Default: 'progressbar-text'\n    className: 'progressbar__label',\n\n    // Inline CSS styles for the text element.\n    // If you want to modify all CSS your self, set null to disable\n    // all default styles.\n    // If the style option contains values, container is automatically\n    // set to position: relative. You can disable behavior this with\n    // autoStyleContainer: false\n    // If you specify anything in this object, none of the default styles\n    // apply\n    // Default: object speficied below\n    style: {\n      // Text color.\n      // Default: same as stroke color (options.color)\n      color: '#f00',\n      position: 'absolute',\n      left: '50%',\n      top: '50%',\n      padding: 0,\n      margin: 0,\n      // You can specify styles which will be browser prefixed\n      transform: {\n          prefix: true,\n          value: 'translate(-50%, -50%)'\n      }\n    },\n\n    // Only effective if the text.style is not null\n    // By default position: relative is applied to container if text\n    // is set. Setting this to false disables that feature.\n    autoStyleContainer: true,\n\n    // Only effective if the shape is SemiCircle.\n    // If true, baseline for text is aligned with bottom of\n    // the SVG canvas. If false, bottom line of SVG canvas\n    // is in the center of text.\n    // Default: true\n    alignToBottom: true\n  },\n\n  // Fill color for the shape. If null, no fill.\n  // Default: null\n  fill: 'rgba(0, 0, 0, 0.5)',\n\n  // Duration for animation in milliseconds\n  // Default: 800\n  duration: 1200,\n\n  // Easing for animation. See #easing section.\n  // Default: 'linear'\n  easing: 'easeOut',\n\n  // See #custom-animations section\n  // Built-in shape passes reference to itself and a custom attachment\n  // object to step function\n  from: { color: '#eee' },\n  to: { color: '#000' },\n  step: function(state, circle, attachment) {\n    circle.path.setAttribute('stroke', state.color);\n  },\n\n  // If true, some useful console.warn calls will be done if it seems\n  // that progressbar is used incorrectly\n  // Default: false\n  warnings: false\n}\n```\n\n## ProgressBar vm methods\n\n#### svg()\nReference to SVG element where progress bar is drawn.\n\n#### path()\nReference to SVG path which presents the actual progress bar.\n\n#### trail()\nReference to SVG path which presents the trail of the progress bar. Returns null if trail is not defined.\n\n#### text()\nReference to p element which presents the text label for progress bar. Returns null if text is not defined.\n\n#### animate(progress, [options], [cb])\nAnimates drawing of a shape.\n\n- `progress`: progress from 0 to 1.\n- `options`: Animation options. These options override the defaults given in initialization.\n```js\n{\n  // Duration for animation in milliseconds\n  // Default: 800\n  duration: 1200,\n\n  // Easing for animation. See #easing section.\n  // Default: 'linear'\n  easing: 'easeInOut',\n\n  // See #custom-animations section\n  // Built-in shape passes reference to itself and a custom attachment\n  // object to step function\n  from: { color: '#eee' },\n  to: { color: '#000' },\n  step: function(state, circle, attachment) {\n      circle.path.setAttribute('stroke', state.color);\n  }\n}\n```\n- `cb`: Callback function which is called after animation ends.\n\n#### set(progress)\nSets progress instantly without animation. Clears all animations for path.\n\n#### stop()\nStops animation to its current position.\n\n#### value()\nReturns current shown progress from 0 to 1. This value changes when animation is running.\n\n#### setText(text)\nSets text to given a string. If you need to dynamically modify the text element, see .text attribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangdahoo%2Fvue-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangdahoo%2Fvue-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangdahoo%2Fvue-progress/lists"}