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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*
* 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.
*/
/*!
Spux is a handcrafted and opinionated library of minimal loaders for Leptos.
Getting started
----
First install Leptos from <https://leptos.dev>
Then start a new Leptos project with either of the following commands:
Axum: `cargo leptos new --git https://github.com/leptos-rs/start-axum`
Actix Web: `cargo leptos new --git https://github.com/leptos-rs/start-actix`
Lastly install and add Spux at the root of the new project
```
cargo add spux
```
# Usage
Spux loaders are separated into `spinners` and `pulsers`.
v0.1.1 comes packed with:
`spinners`::
* `Square`
* `Triangle`
* `FilledSquare`
* `PartialCircle`
`pulsers`::
* `Circle`
* `Diamond`
* `FilledCircle`
* `FilledDiamond`
To use the various `spinners` and `pulsers`, enable them via features in your `Cargo.toml`:
```toml
[dependencies]
spux = { version = "0.1.1", features = ["spinners", "pulsers"] }
```
Once Spux is installed, include the pulser or spinner that you want to use
```rust
use leptos::prelude::*;
use spux::pulsers::Circle;
#[component]
fn App() -> IntoView {
view! {
<Circle color="#000000" size=10 />
}
}
```
Each Spux component takes in required props for both `color` (#hex) and `size` (by px).
| Prop | Type | Example |
| :------ | :--- | :-------- |
| color | &str | "#000000" |
| size | u32 | 15 |
```rust
use leptos::prelude::*;
use spux::pulsers::Diamond;
#[component]
fn App() -> IntoView {
view! {
<Diamond color="#000000" size=10 />
}
}
```
Spux components can also be used with `Suspense` in Leptos.
```rust
use leptos::prelude::*;
use spux::spinners::FilledSquare;
#[component]
fn App() -> IntoView {
// posts_view consists of a server function that's being called to
// return a list of posts. see examples/basic-spinner on the GitHub page
// for more details
view! {
<Suspense fallback=move || view! {
<div
style:width="full"
style:margin-x="auto"
style:align-items="center"
style:justify-content="center"
style:display="flex"
>
<FilledSquare color="#000000" size=10 />
</div>
}>
<div>
<p>"Posts"</p>
<hr />
{posts_view}
</div>
</Suspense>
}
}
```
*/