Kalana B. Thilakarathna
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
export function TopLoader({ active }: { active: boolean }) {
|
|
if (!active) return null
|
|
return (
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-[2px] overflow-hidden">
|
|
<div className="top-loader-bar">
|
|
<span className="top-loader-head" />
|
|
</div>
|
|
<style jsx>{`
|
|
.top-loader-bar {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 60, 90, 0.45) 50%,
|
|
rgba(255, 90, 120, 0.9) 85%,
|
|
#ff2e63 100%
|
|
);
|
|
transform: translateX(-100%);
|
|
animation: top-loader-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
.top-loader-head {
|
|
position: absolute;
|
|
right: 0;
|
|
top: -2px;
|
|
height: 6px;
|
|
width: 10px;
|
|
border-radius: 9999px;
|
|
background: #ff6b8a;
|
|
box-shadow:
|
|
0 0 6px 1px #ff2e63,
|
|
0 0 14px 2px rgba(255, 46, 99, 0.75),
|
|
0 0 24px 4px rgba(255, 46, 99, 0.35);
|
|
}
|
|
@keyframes top-loader-slide {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|