45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
// ProjectProgressChartSkeleton.jsx
|
|
import React from "react";
|
|
|
|
const ProjectProgressChartSkeleton = () => {
|
|
return (
|
|
<div className="card" style={{ minHeight: "400px" }}>
|
|
<div className="card-header">
|
|
<div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
|
|
{/* Left: Title */}
|
|
<div className="card-title text-start">
|
|
<div className="placeholder-glow">
|
|
<span className="placeholder col-6 mb-2"></span>
|
|
<span className="placeholder col-4"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row 2: Time Range Buttons */}
|
|
<div className="d-flex flex-wrap mt-2">
|
|
{Array(7)
|
|
.fill(0)
|
|
.map((_, idx) => (
|
|
<span
|
|
key={idx}
|
|
className="placeholder bg-light col-1 me-2"
|
|
style={{ height: "25px", borderRadius: "5px" }}
|
|
></span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-body">
|
|
<div
|
|
className="placeholder-glow"
|
|
style={{ height: "250px", width: "100%" }}
|
|
>
|
|
<span className="placeholder bg-light col-12 h-100"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectProgressChartSkeleton;
|