diff --git a/README.md b/README.md index 82be0af..0ab5202 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,30 @@ # Carbon.NeosUi.LoadingAnimation -https://github.com/user-attachments/assets/3af20265-5254-4a22-ba53-0e57dc24a36c - 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). You can either use a version with or without a `CSS` file. (Depends on your build stack) +## How it looks + +![Visualization of animation](https://github.com/user-attachments/assets/afecd1bf-d1de-4cb7-a1c7-813bd1ea2a5b) + +## 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"; @@ -42,7 +59,15 @@ function Editor({ id, isLoading }) { setLoading(false); }, []); - return ; + return ( + ; + ) } ``` @@ -58,10 +83,10 @@ Every component receives following props: > `delayTime` and `timeoutTime` should be positive. `timeoutTime` is the time after `delayTime` is finished. -## Visual state +## 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. The states are: +changes his state. If `isLoading` is false, nothing is displayed at all. ``` ┌────────────────────┐