signal-desktop/sticker-creator/elements/ProgressBar.tsx
2022-11-17 16:45:19 -08:00

27 lines
656 B
TypeScript

// Copyright 2019-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import classnames from 'classnames';
import * as styles from './ProgressBar.scss';
export type Props = Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
readonly count: number;
readonly total: number;
};
export const ProgressBar = React.memo(function ProgressBarInner({
className,
count,
total,
}: Props) {
return (
<div className={classnames(styles.base, className)}>
<div
className={styles.bar}
style={{ width: `${Math.floor((count / total) * 100)}%` }}
/>
</div>
);
});