Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/dreambo8563/easy-circular-progress

easy circular progress component with counting effect 💫🏺🎡
https://github.com/dreambo8563/easy-circular-progress

circular-progress-bar countdown theme vue

Last synced: about 2 months ago
JSON representation

easy circular progress component with counting effect 💫🏺🎡

Lists

README 

        
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/9d5901431eb1423192c2ace8bd5064d3)](https://app.codacy.com/app/dreambo8563/easy-circular-progress?utm_source=github.com&utm_medium=referral&utm_content=dreambo8563/easy-circular-progress&utm_campaign=Badge_Grade_Dashboard)

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

[![codecov](https://codecov.io/gh/dreambo8563/easy-circular-progress/branch/master/graph/badge.svg)](https://codecov.io/gh/dreambo8563/easy-circular-progress)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

![npm](https://img.shields.io/npm/dt/easy-circular-progress.svg?style=flat)

[![Build Status](https://travis-ci.com/dreambo8563/easy-circular-progress.svg?branch=master)](https://travis-ci.com/dreambo8563/easy-circular-progress)

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Feasy-circular-progress.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Feasy-circular-progress?ref=badge_shield)

[![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/easy-circular-progress.svg)](https://greenkeeper.io/)

[![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/easy-circular-progress/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/easy-circular-progress?targetFile=package.json)



# easy-circular-progress



## Install



```

npm install easy-circular-progress --save

```



### Quick Start



```vue



  


    

      

    

    

      

        More Color

      

    



    

      

        Bolder & Bigger One

      

    



    

      

        Slow One

      

    



    

      

        More Precise

      

    



    

      
hello


      

        More Precise

      

    

  



import Progress from "easy-circular-progress";



export default {

  name: "app",

  components: {

    Progress

  }

};



#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  height: 100vh;

  color: #fff;

  background: #3e423a;

  display: flex;

  justify-content: center;

  align-items: center;

}

body {

  margin: 0;

  padding: 0;

}



```



### Prop Types



| Property           | Type             | Required? | Description                                                           |

| :----------------- | :--------------- | :-------- | :-------------------------------------------------------------------- |

| strokeWidth        | Number           |           | default is 4, the width of the progress circle, the bigger the bolder |

| radius             | Number           |           | the inner circle radius, default is 38                                |

| transitionDuration | Number           |           | default is 1000, transitionDuration for the animation                 |

| strokeColors       | String           |           | default is "#aaff00"                                                  |

| value              | Number \| String |           | default is 0.0, should be less or equal then 100                      |



### Slot



| Slot Name | Description                         |

| :-------- | ----------------------------------- |

| footer    | we can add a footer for the circle  |

| default   | the content displayed in the circle |



> if default slot provided, the coutdown effect will be ignored.



### Advance Guide



#### Customized Theme



- In your customized scss file (demo.scss)



```scss

$--circular-progress-int-fz: 28px;

$--circular-progress-dec-fz: 12px;

@import '~easy-circular-progress/src/index';

```



- import the scss to override the default theme in main.js (entry file) before you import the Draw component



```js

import './demo.scss';

```



> variables



We split the number into two parts (int, dec)

We can define the font-size for each part



- \$--circular-progress-int-fz: 28px;

- \$--circular-progress-dec-fz: 12px;



#### Possibly Polyfill



```js

Number.isNaN =

  Number.isNaN ||

  function(value) {

    return value !== value;

  };

```



## License



[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-circular-progress.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-circular-progress?ref=badge_large)



## Contributors



Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Vincent Guo
Vincent Guo
💻 📖 🚇



This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!