https://github.com/carbonpackages/carbon.neosui.loadinganimation
Loading animation for Neos UI
https://github.com/carbonpackages/carbon.neosui.loadinganimation
loading-animations loading-indicator loading-spinner neos-ui neoscms react
Last synced: about 2 months ago
JSON representation
Loading animation for Neos UI
- Host: GitHub
- URL: https://github.com/carbonpackages/carbon.neosui.loadinganimation
- Owner: CarbonPackages
- Created: 2024-10-22T06:54:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-11T22:50:10.000Z (about 1 year ago)
- Last Synced: 2025-09-04T11:00:59.740Z (7 months ago)
- Topics: loading-animations, loading-indicator, loading-spinner, neos-ui, neoscms, react
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Carbon.NeosUi.LoadingAnimation
It’s important that users understand that things are happening when they have to wait for something. This loading timer
can be used to provide feedback when there is a server response delay.
This is a small package to help create a nice loading animation in the [Neos UI](http://github.com/neos/neos-ui).
There are three variants of the loading animation: One with a CSS file, one with [StyleX](https://stylexjs.com),
and one with pure inline style attributes. Use the one that best suits your stack.
## How it looks
## How to install
Based on your package manager run:
```bash
# npm
npm install carbon-neos-loadinganimation --save-dev
# pnpm
pnpm add carbon-neos-loadinganimation -D
# Yarn
yarn add carbon-neos-loadinganimation --dev
```
## How to use
```js
// Styled with inline styles
import { LoadingWithStyles } from "carbon-neos-loadinganimation";
// Styled with css classes
import { LoadingWithClassNames } from "carbon-neos-loadinganimation";
// Styled with styleX classes
import { LoadingWithStyleX } from "carbon-neos-loadinganimation";
```
You can also directly import the loader:
```js
// Styled with inline styles
import LoadingAnimation from "carbon-neos-loadinganimation/LoadingWithStyles";
// Styled with css classes
import LoadingAnimation from "carbon-neos-loadinganimation/LoadingWithClassNames";
// Styled with styleX classes
import LoadingAnimation from "carbon-neos-loadinganimation/LoadingWithStyleX";
```
You can use the component inside react like this
```jsx
import React, { useState, useEffect } from "react";
import LoadingAnimation from "carbon-neos-loadinganimation/LoadingWithStyles";
function Editor({ id, isLoading }) {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setLoading(true);
// Do your calls
// ...
setLoading(false);
}, []);
return ;
}
```
Every component receives following props:
| Property name | Default value | Description |
| ------------- | -------------------------- | -------------------------------------------------------------------- |
| `isLoading` | `false` | The main property. True will start the animation process. |
| `delayTime` | `500` | The time in ms after the circle animations starts. |
| `timeoutTime` | `5000` | The time in ms after the dots animations starts. |
| `id` | `null` | The id of the container |
| `title` | `'Neos.Neos:Main:loading'` | The title of the container. Will shown a tooltip. Will be translated |
| `width` | `60` | Controls the size of the animation |
> `delayTime` and `timeoutTime` should be positive. `timeoutTime` is the time after `delayTime` is finished.
## How it works
After a certain time when the `isLoading` is set to `true`, determined by `delayTime` and `timeoutTime`, the timers
changes his state. If `isLoading` is false, nothing is displayed at all.
```
┌────────────────────┐
┌───────│ isLoading │───────┐
│ └────────────────────┘ │
true false
│ │
▼ ▼
┌───────────────────────────┐ ┌───────────────────────────┐
│ │ │ cancel timer │
│ reserve space │ │ + │
│ │ │ return null │
└───────────────────────────┘ └───────────────────────────┘
│
after delayTime in ms
│
▼
┌───────────────────────────┐
│ │
│ show circle animation │
│ │
└───────────────────────────┘
│
after timeoutTime in ms
│
▼
┌───────────────────────────┐
│ │
│ show dots animation │
│ │
└───────────────────────────┘
```