Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 6 days ago
JSON representation

easy circular progress component with counting effect 💫🏺🎡

Host: GitHub
URL: https://github.com/dreambo8563/easy-circular-progress
Owner: dreambo8563
License: mit
Created: 2019-04-22T15:45:14.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2020-12-08T04:34:15.000Z (about 4 years ago)
Last Synced: 2025-02-07T01:14:37.118Z (13 days ago)
Topics: circular-progress-bar, countdown, theme, vue
Language: HTML
Homepage: https://dreambo8563.github.io/easy-circular-progress/
Size: 1.58 MB
Stars: 120
Watchers: 3
Forks: 22
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

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}
💻 📖 🚇

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