react-pdf-flipbook-viewer
Version:
A customizable React component to render PDF documents in a flipbook-style viewer — perfect for brochures, magazines, and interactive documents. ## Features
42 lines (41 loc) • 3.2 kB
JavaScript
import React from 'react';
const PdfLoading = () => {
const animationName = 'pdfLoadingPaging';
const animationClassName = 'pdf-loading-page-animate';
return (React.createElement(React.Fragment, null,
React.createElement("style", { dangerouslySetInnerHTML: {
__html: `
@keyframes ${animationName} {
0% {
transform: rotateY(0deg) skewY(0deg);
}
50% {
transform: rotateY(90deg) skewY(-20deg);
}
100% {
transform: rotateY(180deg) skewY(0deg);
}
}
.${animationClassName} {
animation: ${animationName} 0.7s linear infinite;
transform-origin: left;
}
`
} }),
React.createElement("div", { className: "absolute top-0 left-0 flex items-center justify-center h-full w-full bg-background" },
React.createElement("div", { className: "flex items-center gap-3 p-2 rounded-md" },
React.createElement("div", { className: "w-14 h-fit flex items-center justify-end relative animate-pulse" },
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "hsl(var(--primary))", viewBox: "0 0 126 75", className: "w-full h-auto shadow-sm" },
React.createElement("rect", { strokeWidth: "3", stroke: "hsl(var(--background))", rx: "7.5", height: "70", width: "121", y: "2.5", x: "2.5" }),
React.createElement("line", { strokeWidth: "2", stroke: "hsl(var(--background))", y2: "75", x2: "63.5", x1: "63.5" }),
React.createElement("path", { strokeLinecap: "round", strokeWidth: "2", stroke: "hsl(var(--background))", d: "M25 20H50" }),
React.createElement("path", { strokeLinecap: "round", strokeWidth: "2", stroke: "hsl(var(--background))", d: "M101 20H76" }),
React.createElement("path", { strokeLinecap: "round", strokeWidth: "2", stroke: "hsl(var(--background))", d: "M16 30L50 30" }),
React.createElement("path", { strokeLinecap: "round", strokeWidth: "2", stroke: "hsl(var(--background))", d: "M110 30L76 30" })),
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ffffff74", viewBox: "0 0 65 75", className: `${animationClassName} w-1/2 h-auto absolute` },
React.createElement("path", { strokeLinecap: "round", strokeWidth: "2", stroke: "hsl(var(--primary))", d: "M40 20H15" }),
React.createElement("path", { strokeLinecap: "round", strokeWidth: "2", stroke: "hsl(var(--primary))", d: "M49 30L15 30" }),
React.createElement("path", { strokeWidth: "2", stroke: "hsl(var(--primary))", d: "M2.5 2.5H55C59.1421 2.5 62.5 5.85786 62.5 10V65C62.5 69.1421 59.1421 72.5 55 72.5H2.5V2.5Z" }))),
React.createElement("div", { className: "text-base font-semibold" }, "Loading PDF...")))));
};
export default PdfLoading;