lepticons_animate/
css_animations.rs

1use leptos::prelude::*;
2
3const ANIMATION_CSS: &str = "\
4@keyframes lepticons-spin {\
5  from { transform: rotate(0deg); }\
6  to { transform: rotate(360deg); }\
7}\
8@keyframes lepticons-pulse {\
9  0%, 100% { opacity: 1; }\
10  50% { opacity: 0.5; }\
11}\
12@keyframes lepticons-bounce {\
13  0%, 100% { transform: translateY(0); }\
14  50% { transform: translateY(-25%); }\
15}\
16@keyframes lepticons-ping {\
17  75%, 100% { transform: scale(2); opacity: 0; }\
18}\
19.lepticons-spin { animation: lepticons-spin 1s linear infinite; }\
20.lepticons-pulse { animation: lepticons-pulse 2s ease-in-out infinite; }\
21.lepticons-bounce { animation: lepticons-bounce 1s ease infinite; }\
22.lepticons-ping { animation: lepticons-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }\
23";
24
25/// Injects the CSS animation utility classes into the document.
26///
27/// Place this component once at the top of your app to enable
28/// `.lepticons-spin`, `.lepticons-pulse`, `.lepticons-bounce`, and `.lepticons-ping`
29/// CSS classes on any `<Icon>` component.
30///
31/// # Example
32///
33/// ```rust,ignore
34/// use lepticons_animate::AnimationStyles;
35/// use lepticons::{Icon, LucideGlyph};
36///
37/// // In your app root:
38/// view! {
39///     <AnimationStyles />
40///     <Icon glyph=LucideGlyph::Loader class="lepticons-spin" />
41///     <Icon glyph=LucideGlyph::Bell class="lepticons-bounce" />
42/// }
43/// ```
44#[component]
45pub fn AnimationStyles() -> impl IntoView {
46    view! {
47        <style>{ANIMATION_CSS}</style>
48    }
49}
lepticons_animate/css_animations.rs

lepticons_animate/
css_animations.rs
