mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
feat: add MaritimeLoader component for enhanced loading experience
This commit is contained in:
Estifo77
@@ -1,14 +1,15 @@
|
||||
export * from './lib/input/BilingualInput';
|
||||
export * from './lib/input/CountrySelect';
|
||||
export * from './lib/feedback/ConfirmModal';
|
||||
export * from './lib/feedback/ApiErrorAlert';
|
||||
export * from './lib/feedback/notify';
|
||||
export * from './lib/feedback/use-error-handler';
|
||||
export * from './lib/layout/AppHeader';
|
||||
export * from './lib/layout/AppSidebar';
|
||||
export * from './lib/layout/BrandAvatar';
|
||||
export * from './lib/layout/ColorSchemeToggle';
|
||||
export * from './lib/layout/LanguageSwitcher';
|
||||
export * from './lib/layout/PageHeader';
|
||||
export * from './lib/data/AdvancedTable';
|
||||
export * from './lib/data/useServerTable';
|
||||
export * from "./lib/input/BilingualInput";
|
||||
export * from "./lib/input/CountrySelect";
|
||||
export * from "./lib/feedback/ConfirmModal";
|
||||
export * from "./lib/feedback/ApiErrorAlert";
|
||||
export * from "./lib/feedback/notify";
|
||||
export * from "./lib/feedback/use-error-handler";
|
||||
export * from "./lib/layout/AppHeader";
|
||||
export * from "./lib/layout/AppSidebar";
|
||||
export * from "./lib/layout/BrandAvatar";
|
||||
export * from "./lib/layout/ColorSchemeToggle";
|
||||
export * from "./lib/layout/LanguageSwitcher";
|
||||
export * from "./lib/layout/PageHeader";
|
||||
export * from "./lib/data/AdvancedTable";
|
||||
export * from "./lib/data/useServerTable";
|
||||
export * from "./lib/components/MaritimeLoader"
|
||||
|
||||
436
libs/ui/src/lib/components/MaritimeLoader.tsx
Normal file
436
libs/ui/src/lib/components/MaritimeLoader.tsx
Normal file
@@ -0,0 +1,436 @@
|
||||
import type { CSSProperties, ComponentPropsWithoutRef } from "react";
|
||||
|
||||
export interface MaritimeLoaderProps extends Omit<
|
||||
ComponentPropsWithoutRef<"span">,
|
||||
"children" | "color"
|
||||
> {
|
||||
/** Standalone size. Mantine's Loader size is used automatically when omitted. */
|
||||
size?: number | string;
|
||||
/** Standalone CSS color. Mantine's Loader color is used automatically when omitted. */
|
||||
color?: string;
|
||||
/** Accessible status text. */
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const styles = `
|
||||
.ema-loader {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(var(--ema-size, var(--loader-size, 80px)) * 1.88);
|
||||
color: var(--ema-color, var(--loader-color, #075985));
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ema-loader__svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: var(--ema-size, var(--loader-size, 80px));
|
||||
overflow: visible;
|
||||
filter: drop-shadow(
|
||||
0 calc(var(--ema-size, var(--loader-size, 80px)) * 0.035)
|
||||
calc(var(--ema-size, var(--loader-size, 80px)) * 0.04)
|
||||
rgb(7 39 58 / 18%)
|
||||
);
|
||||
}
|
||||
|
||||
.ema-loader__ship {
|
||||
transform-box: fill-box;
|
||||
transform-origin: 50% 82%;
|
||||
animation: ema-ship-float 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
|
||||
}
|
||||
|
||||
.ema-loader__shadow {
|
||||
fill: currentColor;
|
||||
opacity: 0.12;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: ema-shadow-breathe 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
|
||||
}
|
||||
|
||||
.ema-loader__deck {
|
||||
fill: currentColor;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.ema-loader__superstructure > path:first-child,
|
||||
.ema-loader__bridge-top {
|
||||
fill: #f8fbfc;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.4;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__bridge-top { stroke-width: 2; }
|
||||
|
||||
.ema-loader__window {
|
||||
fill: #bfe9ff;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0.7;
|
||||
}
|
||||
|
||||
.ema-loader__cabin-line {
|
||||
fill: currentColor;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.ema-loader__funnel > path:first-child {
|
||||
fill: #eef3f5;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__green { fill: #078930; }
|
||||
.ema-loader__yellow { fill: #fcd116; }
|
||||
.ema-loader__red { fill: #da121a; }
|
||||
|
||||
.ema-loader__mast {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__flag-pole {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.7;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.ema-loader__flag {
|
||||
transform-box: fill-box;
|
||||
transform-origin: left center;
|
||||
animation: ema-flag-wave 0.95s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.ema-loader__hull {
|
||||
fill: #f8fbfc;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.4;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__lower-hull {
|
||||
fill: currentColor;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.ema-loader__waterline {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 52%);
|
||||
stroke-width: 2.4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.ema-loader__bow-highlight {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 46%);
|
||||
stroke-width: 2.3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__portholes {
|
||||
fill: #d7f2ff;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0.8;
|
||||
}
|
||||
|
||||
.ema-loader__cargo path {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 22%);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.ema-loader__container-dark rect { fill: #3f4a52; }
|
||||
.ema-loader__container-muted rect { fill: #7d8991; }
|
||||
.ema-loader__container-steel rect { fill: #59656d; }
|
||||
.ema-loader__container-light rect { fill: #aab2b8; }
|
||||
.ema-loader__container-medium rect { fill: #6c7880; }
|
||||
|
||||
.ema-loader__water-back,
|
||||
.ema-loader__water-front,
|
||||
.ema-loader__foam {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__water-back {
|
||||
stroke: currentColor;
|
||||
stroke-width: 5;
|
||||
opacity: 0.28;
|
||||
stroke-dasharray: 58 12;
|
||||
animation: ema-water-back 2.8s linear infinite;
|
||||
}
|
||||
|
||||
.ema-loader__water-front {
|
||||
stroke: currentColor;
|
||||
stroke-width: 6;
|
||||
opacity: 0.55;
|
||||
stroke-dasharray: 70 10;
|
||||
animation: ema-water-front 1.9s linear infinite;
|
||||
}
|
||||
|
||||
.ema-loader__foam {
|
||||
stroke: rgb(255 255 255 / 78%);
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 11 7;
|
||||
animation: ema-foam-drift 1.65s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ema-ship-float {
|
||||
0%, 100% { transform: translateY(1.5px) rotate(-0.65deg); }
|
||||
50% { transform: translateY(-3px) rotate(0.65deg); }
|
||||
}
|
||||
|
||||
@keyframes ema-shadow-breathe {
|
||||
0%, 100% { transform: scaleX(1.02); opacity: 0.14; }
|
||||
50% { transform: scaleX(0.9); opacity: 0.08; }
|
||||
}
|
||||
|
||||
@keyframes ema-flag-wave {
|
||||
from { transform: skewY(-3deg) scaleX(0.94); }
|
||||
to { transform: skewY(3deg) scaleX(1.04); }
|
||||
}
|
||||
|
||||
@keyframes ema-water-back {
|
||||
to { stroke-dashoffset: -140; }
|
||||
}
|
||||
|
||||
@keyframes ema-water-front {
|
||||
to { stroke-dashoffset: 160; }
|
||||
}
|
||||
|
||||
@keyframes ema-foam-drift {
|
||||
to { stroke-dashoffset: -36; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ema-loader__ship,
|
||||
.ema-loader__shadow,
|
||||
.ema-loader__flag,
|
||||
.ema-loader__water-back,
|
||||
.ema-loader__water-front,
|
||||
.ema-loader__foam {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ema-loader__green,
|
||||
.ema-loader__yellow,
|
||||
.ema-loader__red,
|
||||
.ema-loader__container-dark rect,
|
||||
.ema-loader__container-muted rect,
|
||||
.ema-loader__container-steel rect,
|
||||
.ema-loader__container-light rect,
|
||||
.ema-loader__container-medium rect {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ema-loader__label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
margin-top: 4px;
|
||||
color: currentColor;
|
||||
}
|
||||
`;
|
||||
|
||||
function toCssSize(value: number | string | undefined) {
|
||||
return typeof value === "number" ? `${value}px` : value;
|
||||
}
|
||||
|
||||
export function MaritimeLoader({
|
||||
size,
|
||||
color,
|
||||
label = "Loading maritime services",
|
||||
className,
|
||||
style,
|
||||
...props
|
||||
}: MaritimeLoaderProps) {
|
||||
const cssVariables = {
|
||||
...(size ? { "--ema-size": toCssSize(size) } : {}),
|
||||
...(color ? { "--ema-color": color } : {}),
|
||||
...style,
|
||||
} as CSSProperties;
|
||||
|
||||
return (
|
||||
<span
|
||||
{...props}
|
||||
className={["ema-loader", className].filter(Boolean).join(" ")}
|
||||
style={cssVariables}
|
||||
role="status"
|
||||
aria-label={label}
|
||||
>
|
||||
<style>{styles}</style>
|
||||
|
||||
<svg
|
||||
className="ema-loader__svg"
|
||||
viewBox="0 0 260 138"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<g className="ema-loader__shadow">
|
||||
<ellipse cx="132" cy="113" rx="78" ry="7" />
|
||||
</g>
|
||||
|
||||
<g className="ema-loader__ship">
|
||||
<g className="ema-loader__cargo">
|
||||
<g className="ema-loader__container-dark">
|
||||
<rect x="60" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M66 56v13M73 56v13M80 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-steel">
|
||||
<rect x="89" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M95 56v13M102 56v13M109 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-light">
|
||||
<rect x="118" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M124 56v13M131 56v13M138 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-medium">
|
||||
<rect x="147" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M153 56v13M160 56v13M167 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-dark">
|
||||
<rect x="76" y="35" width="27" height="17" rx="1.5" />
|
||||
<path d="M82 37v13M89 37v13M96 37v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-muted">
|
||||
<rect x="105" y="35" width="27" height="17" rx="1.5" />
|
||||
<path d="M111 37v13M118 37v13M125 37v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-dark">
|
||||
<rect x="134" y="35" width="27" height="17" rx="1.5" />
|
||||
<path d="M140 37v13M147 37v13M154 37v13" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path className="ema-loader__deck" d="M42 72H214l-4 6H48z" />
|
||||
|
||||
<g className="ema-loader__superstructure">
|
||||
<path d="M174 41h27l10 31h-42z" />
|
||||
<path className="ema-loader__bridge-top" d="M178 32h20l5 9h-27z" />
|
||||
<rect
|
||||
className="ema-loader__window"
|
||||
x="179"
|
||||
y="45"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
/>
|
||||
<rect
|
||||
className="ema-loader__window"
|
||||
x="188"
|
||||
y="45"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
/>
|
||||
<rect
|
||||
className="ema-loader__window"
|
||||
x="197"
|
||||
y="45"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
/>
|
||||
<rect
|
||||
className="ema-loader__cabin-line"
|
||||
x="180"
|
||||
y="58"
|
||||
width="20"
|
||||
height="2.5"
|
||||
rx="1.25"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g className="ema-loader__funnel">
|
||||
<path d="M166 25h10l3 17h-15z" />
|
||||
<path
|
||||
className="ema-loader__green"
|
||||
d="M166.9 29h9.9l.6 3.5h-11.1z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__yellow"
|
||||
d="M166.2 32.5h11.2l.6 3.5h-12.4z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__red"
|
||||
d="M165.6 36h12.4l.6 3.5h-13.6z"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g className="ema-loader__mast">
|
||||
<path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" />
|
||||
<circle cx="194" cy="11" r="2" />
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path className="ema-loader__flag-pole" d="M184 20V8" />
|
||||
<g className="ema-loader__flag">
|
||||
<path
|
||||
className="ema-loader__green"
|
||||
d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__yellow"
|
||||
d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__red"
|
||||
d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path
|
||||
className="ema-loader__hull"
|
||||
d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__lower-hull"
|
||||
d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z"
|
||||
/>
|
||||
<path className="ema-loader__waterline" d="M36 87h188" />
|
||||
<path className="ema-loader__bow-highlight" d="M206 81l15 1-8 9" />
|
||||
|
||||
<g className="ema-loader__portholes">
|
||||
<circle cx="66" cy="91" r="2.2" />
|
||||
<circle cx="78" cy="91" r="2.2" />
|
||||
<circle cx="90" cy="91" r="2.2" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g className="ema-loader__water-back">
|
||||
<path d="M3 112c17-8 30-8 47 0s30 8 47 0 30-8 47 0 30 8 47 0 30-8 47 0 30 8 47 0" />
|
||||
</g>
|
||||
<g className="ema-loader__water-front">
|
||||
<path d="M-8 121c19-9 34-9 53 0s34 9 53 0 34-9 53 0 34 9 53 0 34-9 53 0 34 9 53 0" />
|
||||
</g>
|
||||
<g className="ema-loader__foam">
|
||||
<path d="M29 106c13 4 25 5 38 3" />
|
||||
<path d="M200 108c14 1 24-1 35-5" />
|
||||
</g>
|
||||
</svg>
|
||||
{label && <span className="ema-loader__label">{label}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default MaritimeLoader;
|
||||
|
||||
// how to use this component.
|
||||
// <Center style={{ width: "90vw", height: "90vh" }}>
|
||||
// <MaritimeLoader
|
||||
// size={120}
|
||||
// color="#075985"
|
||||
// label="Loading Maritime Services..."
|
||||
// />
|
||||
// </Center>
|
||||
Reference in New Issue
Block a user