diff --git a/apps/web/src/components/molecules/PDFViewer/index.module.scss b/apps/web/src/components/molecules/PDFViewer/index.module.scss index 4f3cf90..40a2272 100644 --- a/apps/web/src/components/molecules/PDFViewer/index.module.scss +++ b/apps/web/src/components/molecules/PDFViewer/index.module.scss @@ -6,6 +6,7 @@ border-radius: 4px; border: 1px solid color('gray09'); overflow: hidden; + position: relative; .pdfButtonWrapper { display: flex; @@ -61,3 +62,16 @@ min-height: 200px; } } + +.progressBar { + width: 100%; + height: 6px; + background-color: color('gray03'); + overflow: hidden; + + .progress { + height: 100%; + background-color: color('primary'); + transition: width 0.3s ease; + } +} diff --git a/apps/web/src/components/molecules/PDFViewer/index.tsx b/apps/web/src/components/molecules/PDFViewer/index.tsx index e84919d..9975f1d 100644 --- a/apps/web/src/components/molecules/PDFViewer/index.tsx +++ b/apps/web/src/components/molecules/PDFViewer/index.tsx @@ -45,17 +45,32 @@ function PDFViewer({ url }: Props) { setNumPages(data.numPages); }; + const [loadingProgress, setLoadingProgress] = useState(0); + + const onDocumentLoadProgress: DocumentProps['onLoadProgress'] = ({ loaded, total }) => { + const progress = (loaded / total) * 100; + setLoadingProgress(progress); + }; + const onPrev = () => setPageNumber(pageNumber - 1); const onNext = () => setPageNumber(pageNumber + 1); return (
+ {loadingProgress > 0 && loadingProgress < 100 && ( +
+
+
+ )} {width && ( loading pdf..
} + onLoadProgress={onDocumentLoadProgress} + loading={
loading document..
} >