@gfazioli/mantine-spinner 2.3.9 → 2.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CODE_OF_CONDUCT.md +1 -1
- package/README.md +30 -14
- package/package.json +1 -1
package/CODE_OF_CONDUCT.md
CHANGED
|
@@ -60,7 +60,7 @@ representative at an online or offline event.
|
|
|
60
60
|
|
|
61
61
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
62
62
|
reported to the community leaders responsible for enforcement at
|
|
63
|
-
|
|
63
|
+
giovambattista.fazioli@gmail.com.
|
|
64
64
|
All complaints will be reviewed and investigated promptly and fairly.
|
|
65
65
|
|
|
66
66
|
All community leaders are obligated to respect the privacy and security of the
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Mantine Spinner Component
|
|
2
2
|
|
|
3
|
-
<img
|
|
3
|
+
<img alt="mantine Spinner" src="https://github.com/gfazioli/mantine-spinner/blob/master/logo.png" />
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
6
|
|
|
@@ -9,6 +9,10 @@
|
|
|
9
9
|
[](https://www.npmjs.com/package/@gfazioli/mantine-spinner)
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)
|
|
15
|
+
|
|
12
16
|
</div>
|
|
13
17
|
|
|
14
18
|
## Overview
|
|
@@ -18,20 +22,14 @@
|
|
|
18
22
|
|
|
19
23
|
This component is created on top of the [Mantine](https://mantine.dev/) library.
|
|
20
24
|
|
|
21
|
-
[
|
|
22
|
-
)](https://mantine.dev/)
|
|
23
|
-
|
|
24
|
-
The component enables the creation of a captivating spinner effect, which enhances the visual dynamics of a user interface. This effect can be used to draw attention, indicate loading processes, or provide an interactive experience that engages users effectively. By implementing this spinner effect, developers can improve the overall aesthetic appeal and functionality of their applications, ensuring a more seamless and enjoyable user experience.
|
|
25
|
+
[Mantine Spinner](https://gfazioli.github.io/mantine-spinner/) is a dedicated React component designed to deliver smooth, customizable loading animations within Mantine-based applications. It exposes controls for visual tuning—including overall size, inner radius, segment count, stroke thickness, and animation speed—so you can match your brand and context, from subtle inline loaders to prominent page-level indicators.
|
|
25
26
|
|
|
26
|
-
|
|
27
|
-
)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)
|
|
28
|
-
[](https://gfazioli.github.io/mantine-spinner/)
|
|
30
|
-
[](https://mantine-extensions.vercel.app/)
|
|
27
|
+
To avoid hydration mismatches in SSR environments, the spinner renders exclusively on the client because its SVG geometry relies on floating‑point math that may differ between server and browser. Styling is provided via package CSS (with an optional `@layer mantine-spinner` import) to integrate cleanly with modern CSS layering and Mantine’s design system, resulting in a dependable, visually consistent loading experience.
|
|
32
28
|
|
|
29
|
+
> [!note]
|
|
30
|
+
>
|
|
31
|
+
> → [Demo and Documentation](https://gfazioli.github.io/mantine-spinner/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)
|
|
33
32
|
|
|
34
|
-
👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.
|
|
35
33
|
|
|
36
34
|
## Installation
|
|
37
35
|
|
|
@@ -59,12 +57,30 @@ function Demo() {
|
|
|
59
57
|
return <Spinner />;
|
|
60
58
|
}
|
|
61
59
|
```
|
|
60
|
+
H## Sponsor
|
|
62
61
|
|
|
63
62
|
<div align="center">
|
|
64
|
-
|
|
65
|
-
[](https://www.star-history.com/#gfazioli/mantine-spinner&Timeline)
|
|
66
63
|
|
|
64
|
+
[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)
|
|
67
65
|
|
|
68
66
|
</div>
|
|
69
67
|
|
|
68
|
+
Your support helps me:
|
|
69
|
+
|
|
70
|
+
- Keep the project actively maintained with timely bug fixes and security updates
|
|
71
|
+
- Add new features, improve performance, and refine the developer experience
|
|
72
|
+
- Expand test coverage and documentation for smoother adoption
|
|
73
|
+
- Ensure long‑term sustainability without relying on ad hoc free time
|
|
74
|
+
- Prioritize community requests and roadmap items that matter most
|
|
75
|
+
|
|
76
|
+
Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.
|
|
77
|
+
|
|
78
|
+
Your help truly matters.
|
|
79
|
+
|
|
80
|
+
💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
|
|
81
|
+
|
|
82
|
+
---
|
|
70
83
|
https://github.com/user-attachments/assets/2401bfe1-e829-4057-a654-7d0a895a9605
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
[](https://www.star-history.com/#gfazioli/mantine-spinner&Timeline)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-spinner",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.11",
|
|
4
4
|
"description": "A Mantine React component offers customizable loading animations to enhance the user experience in React applications.",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-spinner/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|