spux 0.1.1

A handcrafted and opinionated library of minimal loaders for Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/*
 * Copyright (c) David Lin
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
use crate::types::Validation;
use leptos::prelude::*;
use std::process;

/// Renders a circle and pulsates it immediately on
/// the screen.
///
/// Takes in required props for both color (#hex) and size (by px)
///
/// # Example Usage
/// ```
/// use leptos::prelude::*;
/// use spux::pulsers::Circle;
///
/// #[component]
/// fn App() -> impl IntoView {
///     view! {
///         <Circle color="#000000" size=10 />
///     }
/// }
/// ```

#[component]
pub fn Circle(color: &'static str, size: u32) -> impl IntoView {
    // we intentionally create a compile time process exit to inform users
    // that an incorrect #hex color code was used
    let Ok(_) = color.validate_color_code() else {
        eprintln!("Spux Error - Color should be in the #hex format (e.g #000000) for black");
        process::exit(1);
    };

    let half_size = size / 2;
    let quarter_size = size / 4;

    let style = format!(
        "
        .spux-circle {{
            background: transparent;
            display:flex;
            width: {size}px;
            height: {size}px;
            border-radius: 100%;
            margin-top:0px;
            margin-left:0px;
            animation: spux-circle 1400ms ease-in-out forwards;
            animation-iteration-count: infinite;
        }}

        @keyframes spux-circle {{

            0% {{
                width:{size}px;
                height:{size}px;
                margin-top:0px;
                margin-left:0px;
            }}
            50% {{
                width:{half_size}px;
                height:{half_size}px;
                margin-top:{quarter_size}px;
                margin-left:{quarter_size}px;
            }}
            100% {{
                width:{size}px;
                height:{size}px;
                margin-top:0px;
                margin-left:0px;
            }}
        }}  
    "
    );

    view! {
        <style>
            {style}
        </style>
        <div class="spux-circle"
            style:border="2px solid"
            style:border-color=color
        ></div>
    }
}