https://github.com/zzarcon/react-circle

Renders a svg circle + progress, it just works 💘
https://github.com/zzarcon/react-circle

animation circle loading percentage progress react spinner svg

Last synced: 3 months ago
JSON representation

Renders a svg circle + progress, it just works 💘

• Host: GitHub
• URL: https://github.com/zzarcon/react-circle
• Owner: zzarcon
• License: mit
• Created: 2018-03-30T05:32:04.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T18:17:40.000Z (almost 2 years ago)
• Last Synced: 2024-07-30T11:12:46.402Z (4 months ago)
• Topics: animation, circle, loading, percentage, progress, react, spinner, svg
• Language: TypeScript
• Homepage: https://zzarcon.github.io/react-circle
• Size: 6.2 MB
• Stars: 964
• Watchers: 17
• Forks: 52
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  





# react-circle [![Build Status](https://travis-ci.org/zzarcon/react-circle.svg?branch=master)](https://travis-ci.org/zzarcon/react-circle)

> Renders a svg circle + percentage. It just works

# Demo

[https://zzarcon.github.io/react-circle](https://zzarcon.github.io/react-circle/)

# Install 🚀

```bash

$ yarn add react-circle

```

# Usage ⛏

**Basic** 🙃

ReactCircle is opinionated and comes with default size and colors, just pass the **progress** prop to get them:

```javascript

import Circle from 'react-circle';

```

**Custom** 💅

Optionally, you can pass the following props and customize it as your will

```javascript

import Circle from 'react-circle';

// All avaliable props for customization(illustrated by default values):

// Details are ordered as: `: `

```

# Features

* No external dependencies

* No external styles

* 2KB size => https://bundlephobia.com/result?p=react-circle