Circular Bar

A Svelte component that emulates a circular percent based progress bar

This component uses SVG to generate an animated circle progress bar showing a percentage or a button. It will show the percentage digits in the center of the circle together with an optional very short description or, if in checkable mode, a clickable disc. It will adapt to it's parent container and generate its box based on its parent smaller side. You can pick the colors, the short text description and, of course the value between 0 - 100.

Values above 100 will render as 100 and below 0 will render as 0.

CHECK OUT THE ONLINE DEMO

Usage

<script>
    import Circularbar from './circularbar.svelte';
    let value = 0;
    let info = 'Description Here';
</script>

<main>
    <div>
        <Circularbar bind:value bind:info color="#1cda81"></Circularbar>             
    </div>
</main>

<style>
    div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 150px;
    }
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }
</style>

There are a few props you can pass to this component:

Name	Description	Type	Default	Required	Comments
color	Defines the progress color	HTML Color	EMPTY	No	Reverts to the CSS variable --def-circlebar-color
trackColor	Defines the progress' track color	HTML Color	EMPTY	No	Reverts to the CSS variable --def-circlebar-track
textColor	Defines the progress' text color	HTML Color	EMPTY	No	Reverts to the CSS variable --def-circlebar-text
info	Provides the text to be shown below the percentage	String	EMPTY	No	Use \n to break line
thickness	Sets the thickness of the bar in pixels or percentage	String	5%	No	When using percentage, it is relative to the diameter of the circle
value	A value between 0 and 100 that sets the bar	Float	0	Yes	If the number provided < 0, it will be 0. If it is over 100, it stays at 100
checkable	If true a clickable disc will be shown inside the graph and clicking it will toggle state	Boolean	false	No	Info won't be shown and value will account only for drawing of the graph.
checked	When in checkable mode holds the state of the component	Boolean	false	No
decimals	When true the value is rounded to no more than 2 decimals	Boolean	false	No	Only when required

There are a few supported CSS variables that can be used from your code to change the bar's colors. They are:

--def-circlebar-color --> The progress color
--def-circlebar-track --> The track color
--def-circlebar-text  --> The text color

If you set them somewhere above this component's code (:root for instance), it should pick your colors and apply them.

Instalation

Only tested on Svelte 3

This is so simple and has no dependencies that it doesn't need a NPM package. Just copy the file /src/circularbar.svelte to your project's appropriate folder and import it where needed as you would with any .svelte file. All other files are just here for the sake of the example.

Example

Download this code, extract it and run:

npm i
npm run dev