progress-halo

progress-halo

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

Examples

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

Install

If you're using npm:

npm install progress-halo --save

If you're using yarn:

yarn add progress-halo

Usage

In react component:

import React from 'react';
import ProgressHalo from 'progress-halo';
 
function ProgressAvatar(props) {
  const { progress, color, progressColor, radius = 60, width } = props;
  return (
    <Wrapper>
      {/*your custom avatar component or any other component*/}
      <CustomAvatar src={avatar_img} />
      <ProgressHalo
        progress={progress}
        color={color}
        progressColor={progressColor}
        radius={radius}
        width={width}
      />
    </Wrapper>
  );
}
 
export default ProgressAvatar;

Positioning with styled-components (preferred):

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:

.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;
}

Props

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