Skip to content

wstaeblein/circularbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Example

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