Progress Bar

import styled from "styled-components";
export default function ProgressBar({
  width = "200px",
  height = "20px",
  backgroundColor = "#efefef",
  progressColor = "#2F7FCA",
  borderRadius = "10px",
  borderColor = "#ccc",
  borderWidth = "1px",
  className,
  style,
  value = 0,
}) {
  return (
    <Styled
      width={width}
      height={height}
      backgroundColor={backgroundColor}
      style={style}
      borderWidth={borderWidth}
      className={className}
      progressColor={progressColor}
      borderRadius={borderRadius}
      borderColor={borderColor}
    >
      <div className="progress" style={{ width: value + "%" }}></div>
    </Styled>
  );
}
const Styled = styled.div`
  position: relative;
  display: inline-block;
  width: ${({ width }) => width};
  height: ${({ height }) => height};
  border-radius: ${({ borderRadius }) => borderRadius};
  background-color: ${({ backgroundColor }) => backgroundColor};
  overflow: hidden;
  border: ${({ borderWidth }) => borderWidth} solid
    ${({ borderColor }) => borderColor};
  .progress {
    background-color: ${({ progressColor }) => progressColor};
    height: 100%;
  }
`;

import ProgressBar from "../../example/ProgressBar";

export default function TestView() {
  return (
    <div className="test-view">
      <ProgressBar value={50}/>
    </div>
  );
}