├── components ├── css-fill-circle.vue └── css-circle.vue ├── .gitignore ├── index.js ├── .all-contributorsrc ├── .eslintrc ├── webpack.config.js ├── LICENSE ├── package.json ├── examples └── home.html ├── README.md └── app.vue /components/css-fill-circle.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | /node_modules 3 | /dist 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import Vue from 'vue' 4 | import App from './app.vue' 5 | 6 | new Vue({ 7 | el: 'body', 8 | components: { 9 | app: App 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "v-circle", 3 | "projectOwner": "qddegtya", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "contributors": [ 12 | { 13 | "login": "qddegtya", 14 | "name": "Archer (炽宇)", 15 | "avatar_url": "https://avatars2.githubusercontent.com/u/773248?v=4", 16 | "profile": "http://xiaoa.name", 17 | "contributions": [ 18 | "code", 19 | "infra", 20 | "maintenance" 21 | ] 22 | } 23 | ], 24 | "contributorsPerLine": 7 25 | } 26 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 6, 4 | "sourceType": "module" 5 | }, 6 | "rules": { 7 | "indent": [ 8 | 2, 9 | 2 10 | ], 11 | "quotes": [ 12 | 2, 13 | "single" 14 | ], 15 | "linebreak-style": [ 16 | 2, 17 | "unix" 18 | ], 19 | "semi": [ 20 | 2, 21 | "never" 22 | ] 23 | }, 24 | "env": { 25 | "es6": true, 26 | "browser": true, 27 | "node": true 28 | }, 29 | "extends": "eslint:recommended" 30 | } 31 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | var path = require('path') 4 | 5 | module.exports = { 6 | entry: './index.js', 7 | output: { 8 | path: path.join(__dirname, 'dist'), 9 | filename: 'v-circle.js' 10 | }, 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue' 16 | }, 17 | { 18 | test: /\.js$/, 19 | loader: 'babel', 20 | exclude: /node_modules/ 21 | } 22 | ] 23 | }, 24 | babel: { 25 | 'presets': ['es2015'], 26 | 'plugins': ['transform-runtime'] 27 | }, 28 | vue: { 29 | autoprefixer: { 30 | browsers: ['last 2 versions'] 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Archer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v-circle", 3 | "version": "0.1.3", 4 | "description": "A collection of circle progress with Vue.js.", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot --host=0.0.0.0", 8 | "build": "webpack -p" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/qddegtya/v-circle.git" 13 | }, 14 | "keywords": [ 15 | "vue", 16 | "web", 17 | "component", 18 | "circle", 19 | "progress" 20 | ], 21 | "author": "archer", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/qddegtya/v-circle/issues" 25 | }, 26 | "homepage": "https://github.com/qddegtya/v-circle#readme", 27 | "dependencies": { 28 | "vue": "^1.0.21" 29 | }, 30 | "devDependencies": { 31 | "babel-core": "^6.7.7", 32 | "babel-loader": "^6.2.4", 33 | "babel-plugin-transform-runtime": "^6.7.5", 34 | "babel-preset-es2015": "^6.6.0", 35 | "babel-runtime": "^5.8.38", 36 | "node-sass": "^3.6.0", 37 | "sass-loader": "^3.2.0", 38 | "vue-hot-reload-api": "^1.3.2", 39 | "vue-html-loader": "^1.2.2", 40 | "vue-loader": "^8.2.3", 41 | "vue-style-loader": "^1.0.0", 42 | "webpack": "^1.13.0", 43 | "webpack-dev-server": "^1.14.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | v-circle 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | v-circle 2 | [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors) 3 | ====== 4 | 5 | A collection of circle progress with Vue.js. 6 | 7 | * Vue 1.0+ use `v-circle 0.1+` 8 | * Vue 2.0+ use `v-circle 0.2+` 9 | 10 | ## Demos & Examples 11 | 12 | Live Demo: [xiaoa.name/v-circle](http://xiaoa.name/v-circle/) 13 | 14 | To build the examples locally, run: 15 | 16 | ``` 17 | npm install 18 | npm run dev 19 | ``` 20 | 21 | Then open [http://localhost:8080/examples/home.html](http://localhost:8080/examples/home.html) in a browser. 22 | 23 | ## Installation 24 | 25 | The easiest way to use `v-circle` is to install it from NPM and include it in your own Vue build process (using [Webpack](http://webpack.github.io/), etc) 26 | 27 | ``` 28 | $ npm install v-circle 29 | ``` 30 | 31 | ## Build 32 | 33 | build to dist 34 | 35 | ``` 36 | $ npm run build 37 | ``` 38 | 39 | You can also use the standalone build by including `dist/v-circle.js` in your page. If you use this, make sure you have already included Vue, and it is available as a global variable. 40 | 41 | ## Usage 42 | 43 | .vue file usage 44 | 45 | ``` 46 | 49 | 50 | 59 | ``` 60 | 61 | ## Circles 62 | 63 | * CssCircles 64 | * SvgCircles 65 | * CanvasCircles 66 | 67 | ## API 68 | 69 | ### CssCircles 70 | 71 | | prop | type | description | example | default value | 72 | |:------------- |:--------------- |:------------- |:-------- |:-------- | 73 | | color | String | circle progress fill color | #000000 | #2ecc71 | 74 | | width | Number | circle size | 180 | 150 | 75 | | fontSize | Number | circle progress value size | 64 | 64 | 76 | | pv | Number | circle progress value | 75 | 0 | 77 | | textColor | String | circle progress value color | #bdc3c7 | #bdc3c7 | 78 | | bold | String | circle progress outline width | 10 | 5 | 79 | | textBgColor | String | circle progress value background-color | #000000 | #f9f9f9 | 80 | | borderColor | String | circle progress outline color | #000000 | #bdc3c7 | 81 | | during | Number | circle progress animation dur-time | 2 | 0.8 | 82 | | bgColor | String | circle progress background-color | #000000 | #f0f0f0 | 83 | 84 | ## Contributors 85 | 86 | Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)): 87 | 88 | 89 | 90 | | [Archer (炽宇)
Archer (炽宇)](http://xiaoa.name)
[💻](https://github.com/qddegtya/v-circle/commits?author=qddegtya "Code") [🚇](#infra-qddegtya "Infrastructure (Hosting, Build-Tools, etc)") [🚧](#maintenance-qddegtya "Maintenance") | 91 | | :---: | 92 | 93 | 94 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! -------------------------------------------------------------------------------- /components/css-circle.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 49 | 50 | 175 | -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 213 | 214 | 223 | --------------------------------------------------------------------------------