42 lines
1.8 KiB
JavaScript
42 lines
1.8 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.Spinner = void 0;
|
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
const react_1 = require("react");
|
|
const colors_1 = require("../helpers/colors");
|
|
const viewBox = 100;
|
|
const lines = 8;
|
|
const className = '__remotion_spinner_line';
|
|
const remotionSpinnerAnimation = '__remotion_spinner_animation';
|
|
// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
|
|
const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
|
|
const Spinner = ({ size, duration }) => {
|
|
const style = (0, react_1.useMemo)(() => {
|
|
return {
|
|
width: size,
|
|
height: size,
|
|
};
|
|
}, [size]);
|
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
|
|
@keyframes ${remotionSpinnerAnimation} {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
.${className} {
|
|
animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
|
|
}
|
|
` }), (0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
|
|
return ((0, jsx_runtime_1.jsx)("path", { className: className, style: {
|
|
rotate: `${(index * Math.PI * 2) / lines}rad`,
|
|
transformOrigin: 'center center',
|
|
animationDelay: `${index * (duration / lines) - duration}s`,
|
|
}, d: translated, fill: colors_1.LIGHT_TEXT }, index));
|
|
}) })] }));
|
|
};
|
|
exports.Spinner = Spinner;
|