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

/*
 * 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 square and rotates it immediately on
/// the screen.
///
/// Takes in required props for both color (#hex) and size (by px)
///
/// # Example Usage
/// ```
/// use leptos::prelude::*;
/// use spux::spinners::Square;
///
/// #[component]
/// fn App() -> impl IntoView {
///     view! {
///         <Square color="#000000" size=10 />
///     }
/// }
/// ```

#[component]
pub fn Square(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 style = format!(
        "
        .spux-spinner-square {{
            background: transparent;
            display:flex;
            width: {size}px;
            height: {size}px;
            transform: rotate(45deg);
            animation: spux-spinner-square 1400ms ease-in-out forwards;
            animation-iteration-count: infinite;
        }}

        @keyframes spux-spinner-square {{
            0% {{
                transform: rotate(45deg);
            }}
            50% {{
                transform: rotate(90deg);
            }}
            100% {{
                transform: rotate(135deg);
            }}
        }}

    "
    );

    view! {
        <style>
            {style}
        </style>
        <div class="spux-spinner-square"
            style:border="1px solid"
            style:border-color=color
        ></div>
    }
}