progress-halo

progress-halo

:dizzy: React component, for adding dynamic progress ring around other components, for example around user avatar.

$3

https://galpsi.netlify.app/posts/progress-halo

$3

If you're using npm:

``
npm install progress-halo --save
`

If you're using yarn:

`
yarn add progress-halo
`


$3


In react component:
` javascript
import React from 'react';
import ProgressHalo from 'progress-halo';

function ProgressAvatar(props) {
const { progress, color, progressColor, radius = 60, width } = props;
return (

{/your custom avatar component or any other component/}

progress={progress}
color={color}
progressColor={progressColor}
radius={radius}
width={width}
/>

);
}

export default ProgressAvatar;
`
Positioning with styled-components (preferred):
` javascript
import styled from 'styled-components';
import ProgressHalo from 'progress-halo';

const Wrapper = styled.div
position: relative;
;

const CustomAvatar = styled.img
max-width: 100px;
;

const StyledProgressHalo = styled(ProgressHalo)
position: absolute;
top: -10px;
left: -10px;
;
`
Positioning with css:
` css
.progress-avatar__wrapper {
position: relative;
}

.progress-avatar__image {
max-width: 100px;
}

.progress-avatar__halo {
position: absolute !important; /need this to overwrite default inline style/
top: -10px;
left: -10px;
}
`


$3


Props | Description |
--- | :---: |
progress?: number |set current progress value in percentage |
color?: string | hex color code for basic fill
progressColor?: string | hex color code for progress part
radius?: number | radius of the ring
width?: number | width of the ring, use integer number
className?: string` | css class name for styling

* changing of progress property has smooth animation