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

/*
 * 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::Triangle;
///
/// #[component]
/// fn App() -> impl IntoView {
///     view! {
///         <Triangle color="#000000" size=10 />
///     }
/// }
/// ```

#[component]
pub fn Triangle(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 border_color = format!("{}px solid {}", &size * 2, color);
    let half_size = size / 2;
    let style = format!(
        "
            .spux-spinner-triangle {{
                background: transparent;
                border: {size}px solid transparent;
                border-top: 0;
                display:flex;
                width: 0px;
                height: 0px;
                transform: rotate(45deg);
                animation: spux-spinner-triangle 1400ms ease-in-out forwards;
                animation-iteration-count: infinite;
            }}

            @keyframes spux-spinner-triangle  {{
                0% {{
                    transform: rotate(45deg);
                    margin-top:0px;
                    margin-right:0px;
                }}
                50% {{
                    transform: rotate(270deg);
                    margin-top:0px;
                    margin-right:{half_size}px;
                }}
                100% {{
                    transform: rotate(405deg);
                    margin-top:0px;
                    margin-right:0px;
                }}
            }}
        "
    );
    view! {
        <style>
            {style}
        </style>
        <div class="spux-spinner-triangle"
            style:border-bottom=border_color
        ></div>
    }
}