reacto-loader
Version:
A sleek, high-performance Loader component designed for seamless integration into both React and React Native/Expo applications.
521 lines (503 loc) • 27.7 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { useEffect, useState, useRef } from 'react';
import { StyleSheet, View, Animated as Animated$1, Easing as Easing$1, Text } from 'react-native';
import Animated, { useSharedValue, withDelay, withRepeat, withSequence, withTiming, Easing, useAnimatedStyle, useAnimatedProps, interpolate } from 'react-native-reanimated';
import Svg, { Defs, LinearGradient, Stop, Circle, Rect } from 'react-native-svg';
var defaultProps = {
size: 80,
primaryColor: "#3B82F6",
secondaryColor: "#93C5FD",
speed: 2,
};
var BounceLoader = function (_a) {
var _b = _a.primaryColor, primaryColor = _b === void 0 ? defaultProps.primaryColor : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? defaultProps.secondaryColor : _c, _d = _a.speed, speed = _d === void 0 ? 0.8 : _d, _e = _a.dotCount, dotCount = _e === void 0 ? 3 : _e, _f = _a.dotSize, dotSize = _f === void 0 ? 16 : _f, _g = _a.dotSpacing, dotSpacing = _g === void 0 ? 8 : _g, _h = _a.bounceHeightFactor, bounceHeightFactor = _h === void 0 ? 1.5 : _h;
var bounceHeight = -(dotSize * bounceHeightFactor);
return (jsx(View, { style: [styles$7.container, { gap: dotSpacing }], children: Array.from({ length: dotCount }).map(function (_, i) { return (jsx(BouncingDot, { primaryColor: primaryColor, secondaryColor: secondaryColor, size: dotSize, speed: speed, bounceHeight: bounceHeight, delay: i * (speed / dotCount) }, i)); }) }));
};
var BouncingDot = function (_a) {
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, size = _a.size, speed = _a.speed, bounceHeight = _a.bounceHeight, delay = _a.delay;
var translateY = useSharedValue(0);
useEffect(function () {
translateY.value = withDelay(delay * 1000, withRepeat(withSequence(withTiming(bounceHeight, {
duration: (speed * 1000) / 2,
easing: Easing.inOut(Easing.ease),
}), withTiming(0, {
duration: (speed * 1000) / 2,
easing: Easing.inOut(Easing.ease),
})), -1, // Infinite repeat
false));
}, [bounceHeight, delay, speed]);
var animatedStyle = useAnimatedStyle(function () {
return {
transform: [{ translateY: translateY.value }],
};
});
return (jsx(Animated.View, { style: animatedStyle, children: jsxs(Svg, { width: size, height: size, children: [jsx(Defs, { children: jsxs(LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "1", y2: "0", children: [jsx(Stop, { offset: "0%", stopColor: primaryColor }), jsx(Stop, { offset: "100%", stopColor: secondaryColor })] }) }), jsx(Circle, { cx: size / 2, cy: size / 2, r: size / 2, fill: "url(#grad)" })] }) }));
};
var styles$7 = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
});
var hexToRgba = function (hex, alpha) {
hex = hex.replace("#", "");
var r = parseInt(hex.substring(0, 2), 16);
var g = parseInt(hex.substring(2, 4), 16);
var b = parseInt(hex.substring(4, 6), 16);
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
};
// Register animated components
var AnimatedCircle = Animated.createAnimatedComponent(Circle);
var CircularLoader = function (_a) {
var _b = _a.size, size = _b === void 0 ? defaultProps.size : _b, _c = _a.primaryColor, primaryColor = _c === void 0 ? defaultProps.primaryColor : _c, _d = _a.secondaryColor, secondaryColor = _d === void 0 ? defaultProps.secondaryColor : _d, _e = _a.speed, speed = _e === void 0 ? defaultProps.speed : _e, _f = _a.thickness, thickness = _f === void 0 ? 8 : _f, _g = _a.backgroundOpacity, backgroundOpacity = _g === void 0 ? 0.2 : _g;
var radius = 40;
var circumference = 2 * Math.PI * radius;
// Animation values
var rotation = useSharedValue(0);
var dashoffset = useSharedValue(circumference);
// Setup animations
useEffect(function () {
// Rotation animation
rotation.value = withRepeat(withTiming(360, {
duration: speed * 1000,
easing: Easing.linear,
}), -1, // Infinite repeats
false // No reverse
);
// Dash animation sequence
dashoffset.value = withRepeat(withSequence(withTiming(0, {
duration: (speed * 1000) / 2,
easing: Easing.inOut(Easing.ease),
}), withTiming(circumference, {
duration: (speed * 1000) / 2,
easing: Easing.inOut(Easing.ease),
})), -1, // Infinite repeats
false // No reverse
);
}, [speed, circumference]);
// Animated props for the stroke circle
var animatedCircleProps = useAnimatedProps(function () {
return {
strokeDashoffset: dashoffset.value,
};
});
// Animated style for rotation
var animatedStyle = useAnimatedStyle(function () {
return {
transform: [{ rotate: "".concat(rotation.value, "deg") }],
};
});
// Convert hex to rgba for background circle
var bgColor = hexToRgba(primaryColor, backgroundOpacity);
return (jsx(View, { style: [styles$6.container, { width: size, height: size }], children: jsx(Animated.View, { style: [styles$6.svgContainer, animatedStyle], children: jsxs(Svg, { width: "100%", height: "100%", viewBox: "0 0 100 100", children: [jsx(Defs, { children: jsxs(LinearGradient, { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx(Stop, { offset: "0%", stopColor: primaryColor }), jsx(Stop, { offset: "100%", stopColor: secondaryColor })] }) }), jsx(Circle, { cx: "50", cy: "50", r: radius, stroke: bgColor, strokeWidth: thickness, fill: "none" }), jsx(AnimatedCircle, { cx: "50", cy: "50", r: radius, stroke: "url(#gradient)", strokeWidth: thickness, strokeLinecap: "round", fill: "none", strokeDasharray: "".concat(circumference, " ").concat(circumference), animatedProps: animatedCircleProps })] }) }) }));
};
var styles$6 = StyleSheet.create({
container: {
position: "relative",
justifyContent: "center",
alignItems: "center",
},
svgContainer: {
width: "100%",
height: "100%",
},
});
var DotsLoader = function (_a) {
var _b = _a.primaryColor, primaryColor = _b === void 0 ? defaultProps.primaryColor : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? defaultProps.secondaryColor : _c, _d = _a.speed, speed = _d === void 0 ? 1 : _d, _e = _a.dotCount, dotCount = _e === void 0 ? 3 : _e, _f = _a.dotSize, dotSize = _f === void 0 ? 16 : _f, _g = _a.dotSpacing, dotSpacing = _g === void 0 ? 8 : _g, _h = _a.scaleRange, scaleRange = _h === void 0 ? [1, 1.5, 1] : _h;
var dots = Array.from({ length: dotCount });
return (jsx(View, { style: [styles$5.container, { gap: dotSpacing }], children: dots.map(function (_, i) { return (jsx(AnimatedDot, { dotSize: dotSize, primaryColor: primaryColor, secondaryColor: secondaryColor, speed: speed, scaleRange: scaleRange, index: i, dotCount: dotCount }, i)); }) }));
};
var AnimatedDot = function (_a) {
var dotSize = _a.dotSize, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, speed = _a.speed, scaleRange = _a.scaleRange, index = _a.index, dotCount = _a.dotCount;
var scale = useSharedValue(scaleRange[0]);
var opacity = useSharedValue(0.7);
var duration = 1000 / speed;
var delay = index * (duration / dotCount / 2);
useEffect(function () {
scale.value = withDelay(delay, withRepeat(withSequence(withTiming(scaleRange[1], {
duration: duration / 2,
easing: Easing.inOut(Easing.ease),
}), withTiming(scaleRange[2], {
duration: duration / 2,
easing: Easing.inOut(Easing.ease),
})), -1, true));
opacity.value = withDelay(delay, withRepeat(withSequence(withTiming(1, {
duration: duration / 2,
easing: Easing.inOut(Easing.ease),
}), withTiming(0.7, {
duration: duration / 2,
easing: Easing.inOut(Easing.ease),
})), -1, true));
}, [scale, opacity, delay, duration, scaleRange]);
var animatedStyle = useAnimatedStyle(function () {
return {
transform: [{ scale: scale.value }],
opacity: opacity.value,
};
});
var gradientId = "gradient-".concat(index);
var radius = dotSize / 2;
return (jsx(Animated.View, { style: animatedStyle, children: jsxs(Svg, { width: dotSize, height: dotSize, children: [jsx(Defs, { children: jsxs(LinearGradient, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx(Stop, { offset: "0%", stopColor: primaryColor }), jsx(Stop, { offset: "100%", stopColor: secondaryColor })] }) }), jsx(Circle, { cx: radius, cy: radius, r: radius, fill: "url(#".concat(gradientId, ")") })] }) }));
};
var styles$5 = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
});
var FadeLoader = function (_a) {
var _b = _a.size, size = _b === void 0 ? defaultProps.size : _b, _c = _a.primaryColor, primaryColor = _c === void 0 ? defaultProps.primaryColor : _c, _d = _a.secondaryColor, secondaryColor = _d === void 0 ? defaultProps.secondaryColor : _d, _e = _a.speed, speed = _e === void 0 ? 1.2 : _e, _f = _a.dotCount, dotCount = _f === void 0 ? 8 : _f, _g = _a.dotSize, dotSize = _g === void 0 ? 12 : _g, _h = _a.radius, radius = _h === void 0 ? 30 : _h;
return (jsx(View, { style: [styles$4.container, { width: size, height: size }], children: Array.from({ length: dotCount }).map(function (_, index) { return (jsx(FadeDot, { index: index, dotCount: dotCount, dotSize: dotSize, radius: radius, primaryColor: primaryColor, secondaryColor: secondaryColor, speed: speed }, index)); }) }));
};
var FadeDot = function (_a) {
var index = _a.index, dotCount = _a.dotCount, dotSize = _a.dotSize, radius = _a.radius, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, speed = _a.speed;
var opacity = useSharedValue(0);
var angle = (index / dotCount) * 2 * Math.PI;
var x = Math.cos(angle) * radius;
var y = Math.sin(angle) * radius;
useEffect(function () {
var delay = index * ((speed * 1000) / dotCount / 2);
opacity.value = withDelay(delay, withRepeat(withTiming(1, {
duration: speed * 500,
easing: Easing.inOut(Easing.ease),
}, function () {
return withTiming(0, {
duration: speed * 500,
easing: Easing.inOut(Easing.ease),
});
}), -1, false));
}, [index, speed, dotCount]);
var animatedStyle = useAnimatedStyle(function () { return ({
opacity: opacity.value,
}); });
return (jsx(Animated.View, { style: [
styles$4.dotContainer,
{
width: dotSize,
height: dotSize,
left: "50%",
top: "50%",
transform: [
{ translateX: x },
{ translateY: y },
{ translateX: -dotSize / 2 },
{ translateY: -dotSize / 2 },
],
},
animatedStyle,
], children: jsxs(Svg, { width: dotSize, height: dotSize, children: [jsx(Defs, { children: jsxs(LinearGradient, { id: "grad-".concat(index), x1: "0", y1: "0", x2: "1", y2: "0", children: [jsx(Stop, { offset: "0", stopColor: primaryColor, stopOpacity: "1" }), jsx(Stop, { offset: "1", stopColor: secondaryColor, stopOpacity: "1" })] }) }), jsx(Circle, { cx: dotSize / 2, cy: dotSize / 2, r: dotSize / 2, fill: "url(#grad-".concat(index, ")") })] }) }));
};
var styles$4 = StyleSheet.create({
container: {
position: "relative",
justifyContent: "center",
alignItems: "center",
},
dotContainer: {
position: "absolute",
},
});
var GridLoader = function (_a) {
var _b = _a.primaryColor, primaryColor = _b === void 0 ? defaultProps.primaryColor : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? defaultProps.secondaryColor : _c, _d = _a.speed, speed = _d === void 0 ? 1.2 : _d, _e = _a.gridSize, gridSize = _e === void 0 ? 3 : _e, _f = _a.squareSize, squareSize = _f === void 0 ? 12 : _f, _g = _a.gap, gap = _g === void 0 ? 4 : _g;
var squares = Array.from({ length: gridSize * gridSize });
var totalWidth = gridSize * squareSize + (gridSize - 1) * gap;
return (jsx(View, { style: styles$3.container, children: jsx(View, { style: [
styles$3.grid,
{
width: totalWidth,
height: totalWidth,
},
], children: squares.map(function (_, i) {
var row = Math.floor(i / gridSize);
var col = i % gridSize;
var delay = (row + col) * 0.1;
return (jsx(AnimatedSquare, { size: squareSize, speed: speed, delay: delay, primaryColor: primaryColor, secondaryColor: secondaryColor, style: {
position: "absolute",
left: col * (squareSize + gap),
top: row * (squareSize + gap),
} }, i));
}) }) }));
};
var AnimatedSquare = function (_a) {
var size = _a.size, speed = _a.speed, delay = _a.delay, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, style = _a.style;
var scale = useSharedValue(0);
var opacity = useSharedValue(0);
useEffect(function () {
scale.value = withDelay(delay * 1000, withRepeat(withTiming(1, {
duration: speed * 500,
easing: Easing.inOut(Easing.ease),
}), -1, true));
opacity.value = withDelay(delay * 1000, withRepeat(withTiming(1, {
duration: speed * 500,
easing: Easing.inOut(Easing.ease),
}), -1, true));
}, [delay, speed]);
var animatedStyle = useAnimatedStyle(function () {
return {
transform: [{ scale: scale.value }],
opacity: opacity.value,
};
});
return (jsx(Animated.View, { style: [animatedStyle, style], children: jsxs(Svg, { width: size, height: size, children: [jsx(Defs, { children: jsxs(LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx(Stop, { offset: "0", stopColor: primaryColor, stopOpacity: "1" }), jsx(Stop, { offset: "1", stopColor: secondaryColor, stopOpacity: "1" })] }) }), jsx(Rect, { x: "0", y: "0", width: size, height: size, rx: "2", fill: "url(#grad)" })] }) }));
};
var styles$3 = StyleSheet.create({
container: {
alignItems: "center",
justifyContent: "center",
},
grid: {
position: "relative",
},
});
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var MatrixLoader = function (_a) {
var _b = _a.size, size = _b === void 0 ? defaultProps.size : _b, _c = _a.color, color = _c === void 0 ? defaultProps.primaryColor : _c, _d = _a.speed, speed = _d === void 0 ? defaultProps.speed : _d, _e = _a.columns, columns = _e === void 0 ? 6 : _e, _f = _a.characters, characters = _f === void 0 ? "01" : _f, _g = _a.dropSpeed, dropSpeed = _g === void 0 ? 2 : _g;
var _h = useState([]), drops = _h[0], setDrops = _h[1];
var animatedValues = useRef({});
var opacityValues = useRef({});
useEffect(function () {
// Create initial drops
var newDrops = Array.from({ length: columns * 8 }).map(function (_, i) { return ({
id: i,
char: characters[Math.floor(Math.random() * characters.length)],
delay: Math.random() * 2,
}); });
setDrops(newDrops);
// Initialize animated values
newDrops.forEach(function (drop) {
animatedValues.current[drop.id] = new Animated$1.Value(-20);
opacityValues.current[drop.id] = new Animated$1.Value(0);
});
// Start animations for each drop
newDrops.forEach(function (drop) {
startAnimation(drop.id, drop.delay);
});
return function () {
// Cleanup animations if needed
Object.values(animatedValues.current).forEach(function (value) {
value.stopAnimation();
});
Object.values(opacityValues.current).forEach(function (value) {
value.stopAnimation();
});
};
}, [columns, characters, size, dropSpeed, speed]);
var startAnimation = function (id, delay) {
// Reset values
animatedValues.current[id].setValue(-20);
opacityValues.current[id].setValue(0);
// Animation for vertical movement
Animated$1.timing(animatedValues.current[id], {
toValue: size + 20,
duration: (dropSpeed * 1000) / speed,
delay: delay * 1000,
easing: Easing$1.linear,
useNativeDriver: true,
}).start(function () {
// Restart animation when complete
// Update character before restarting
setDrops(function (prev) {
return prev.map(function (drop) {
return drop.id === id
? __assign(__assign({}, drop), { char: characters[Math.floor(Math.random() * characters.length)] }) : drop;
});
});
startAnimation(id, Math.random() * 2);
});
// Animation for opacity
Animated$1.sequence([
Animated$1.timing(opacityValues.current[id], {
toValue: 1,
duration: 200,
delay: delay * 1000,
useNativeDriver: true,
}),
Animated$1.timing(opacityValues.current[id], {
toValue: 1,
duration: (dropSpeed * 1000) / speed - 400,
useNativeDriver: true,
}),
Animated$1.timing(opacityValues.current[id], {
toValue: 0,
duration: 200,
useNativeDriver: true,
}),
]).start();
};
var containerStyle = {
width: size,
height: size,
};
return (jsx(View, { style: [styles$2.container, containerStyle], children: drops.map(function (drop, i) { return (jsx(Animated$1.View, { style: [
styles$2.characterContainer,
{
left: "".concat((i % columns) * (100 / columns), "%"),
transform: [{ translateY: animatedValues.current[drop.id] || 0 }],
opacity: opacityValues.current[drop.id] || 0,
},
], children: jsx(Text, { style: [
styles$2.character,
{
color: color,
textShadowColor: color,
},
], children: drop.char }) }, drop.id)); }) }));
};
var styles$2 = StyleSheet.create({
container: {
position: "relative",
overflow: "hidden",
},
characterContainer: {
position: "absolute",
},
character: {
fontSize: 12,
fontWeight: "bold",
textShadowRadius: 5,
textShadowOffset: { width: 0, height: 0 },
},
});
var MorphingShapesLoader = function (_a) {
var _b = _a.size, size = _b === void 0 ? defaultProps.size : _b, _c = _a.primaryColor, primaryColor = _c === void 0 ? defaultProps.primaryColor : _c, _d = _a.secondaryColor, secondaryColor = _d === void 0 ? defaultProps.secondaryColor : _d, _e = _a.speed, speed = _e === void 0 ? defaultProps.speed : _e, _f = _a.shapeSize, shapeSize = _f === void 0 ? 40 : _f, _g = _a.morphDuration, morphDuration = _g === void 0 ? 2 : _g, _h = _a.glowIntensity, glowIntensity = _h === void 0 ? 8 : _h;
var progress = useSharedValue(0);
var rotation = useSharedValue(0);
useEffect(function () {
progress.value = withRepeat(withTiming(1, {
duration: (morphDuration * 1000) / speed,
easing: Easing.inOut(Easing.ease),
}), -1, true);
rotation.value = withRepeat(withTiming(360, {
duration: (morphDuration * 1000) / speed,
easing: Easing.linear,
}), -1, false);
}, [morphDuration, speed]);
var animatedShapeStyle = useAnimatedStyle(function () {
var borderTopLeftRadius = interpolate(progress.value, [0, 0.2, 0.4, 0.6, 0.8, 1], [0, 50, 0, 50, 50, 0]);
var borderTopRightRadius = interpolate(progress.value, [0, 0.2, 0.4, 0.6, 0.8, 1], [0, 50, 50, 0, 50, 0]);
var borderBottomLeftRadius = interpolate(progress.value, [0, 0.2, 0.4, 0.6, 0.8, 1], [0, 50, 50, 50, 50, 0]);
var borderBottomRightRadius = interpolate(progress.value, [0, 0.2, 0.4, 0.6, 0.8, 1], [0, 50, 50, 50, 50, 0]);
var scale = interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [1, 1.2, 1, 1.2, 1]);
return {
borderTopLeftRadius: borderTopLeftRadius,
borderTopRightRadius: borderTopRightRadius,
borderBottomLeftRadius: borderBottomLeftRadius,
borderBottomRightRadius: borderBottomRightRadius,
transform: [{ rotate: "".concat(rotation.value, "deg") }, { scale: scale }],
shadowColor: primaryColor,
shadowOpacity: 0.5,
shadowRadius: glowIntensity,
shadowOffset: { width: 0, height: 0 },
elevation: 5,
};
});
var createOrbitingDotStyle = function (index) {
var angle = (index * 120 + 360) * (Math.PI / 180);
var orbitRadius = shapeSize / 2 + 15;
return {
transform: [
{ translateX: Math.cos(angle) * orbitRadius },
{ translateY: Math.sin(angle) * orbitRadius },
],
};
};
var orbitingDotStyles = [0, 1, 2].map(function (i) { return createOrbitingDotStyle(i); });
return (jsxs(View, { style: [styles$1.container, { width: size, height: size }], children: [jsx(Animated.View, { style: [animatedShapeStyle, styles$1.shapeContainer], children: jsxs(Svg, { width: shapeSize, height: shapeSize, children: [jsx(Defs, { children: jsxs(LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx(Stop, { offset: "0", stopColor: primaryColor, stopOpacity: "1" }), jsx(Stop, { offset: "1", stopColor: secondaryColor, stopOpacity: "1" })] }) }), jsx(Rect, { width: shapeSize, height: shapeSize, fill: "url(#grad)" })] }) }), [0, 1, 2].map(function (i) { return (jsx(Animated.View, { style: [
styles$1.orbitingDot,
{
backgroundColor: i % 2 === 0 ? primaryColor : secondaryColor,
shadowColor: i % 2 === 0 ? primaryColor : secondaryColor,
shadowOpacity: 0.5,
shadowRadius: glowIntensity / 2,
},
orbitingDotStyles[i],
] }, i)); })] }));
};
var styles$1 = StyleSheet.create({
container: {
position: "relative",
justifyContent: "center",
alignItems: "center",
},
shapeContainer: {
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
},
orbitingDot: {
width: 8,
height: 8,
borderRadius: 4,
position: "absolute",
shadowOffset: { width: 0, height: 0 },
elevation: 5,
},
});
var AnimatedRect = Animated.createAnimatedComponent(Rect);
var WaveLoader = function (_a) {
var _b = _a.primaryColor, primaryColor = _b === void 0 ? defaultProps.primaryColor : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? defaultProps.secondaryColor : _c, _d = _a.speed, speed = _d === void 0 ? 1 : _d, _e = _a.barCount, barCount = _e === void 0 ? 5 : _e, _f = _a.barWidth, barWidth = _f === void 0 ? 8 : _f, _g = _a.barSpacing, barSpacing = _g === void 0 ? 6 : _g, _h = _a.minHeight, minHeight = _h === void 0 ? 24 : _h, _j = _a.maxHeight, maxHeight = _j === void 0 ? 60 : _j;
var bars = Array.from({ length: barCount });
var totalWidth = barWidth * barCount + barSpacing * (barCount - 1);
return (jsx(View, { style: styles.container, children: jsxs(Svg, { width: totalWidth, height: maxHeight, children: [jsxs(Defs, { children: [jsxs(LinearGradient, { id: "gradient1", x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx(Stop, { offset: "0", stopColor: secondaryColor }), jsx(Stop, { offset: "1", stopColor: primaryColor })] }), jsxs(LinearGradient, { id: "gradient2", x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx(Stop, { offset: "0", stopColor: primaryColor }), jsx(Stop, { offset: "1", stopColor: secondaryColor })] })] }), bars.map(function (_, index) { return (jsx(AnimatedBar, { index: index, barWidth: barWidth, barSpacing: barSpacing, minHeight: minHeight, maxHeight: maxHeight, gradientId: index % 2 === 0 ? "gradient1" : "gradient2", speed: speed, barCount: barCount }, index)); })] }) }));
};
var AnimatedBar = function (_a) {
var barCount = _a.barCount, barWidth = _a.barWidth, index = _a.index, maxHeight = _a.maxHeight, minHeight = _a.minHeight, speed = _a.speed, barSpacing = _a.barSpacing, gradientId = _a.gradientId;
var height = useSharedValue(minHeight);
var x = index * (barWidth + barSpacing);
useEffect(function () {
var delay = index * ((speed * 1000) / barCount / 2);
height.value = withDelay(delay, withRepeat(withTiming(maxHeight, {
duration: speed * 1000,
easing: Easing.inOut(Easing.ease),
}), -1, true));
}, []);
var animatedProps = useAnimatedProps(function () { return ({
height: height.value,
y: maxHeight - height.value,
}); });
return (jsx(AnimatedRect, { animatedProps: animatedProps, x: x, width: barWidth, rx: 4, ry: 4, fill: "url(#".concat(gradientId, ")") }));
};
var styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
},
barsContainer: {
flexDirection: "row",
alignItems: "flex-end",
},
bar: {
borderRadius: 4,
},
});
export { BounceLoader, CircularLoader, DotsLoader, FadeLoader, GridLoader, MatrixLoader, MorphingShapesLoader, WaveLoader };
//# sourceMappingURL=index.js.map