2020-11-09 11:45:57 +00:00
|
|
|
# Rectangle Loader
|
|
|
|
|
|
|
|
|
|
Component that displays rectangle loader
|
|
|
|
|
|
|
|
|
|
### Usage
|
|
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import Loaders from "@appserver/common/components/Loaders";
|
2020-11-09 11:45:57 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
<Loaders.Rectangle />
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
2020-11-09 13:02:08 +00:00
|
|
|
<Loaders.Rectangle
|
|
|
|
|
width="100"
|
|
|
|
|
height="50"
|
|
|
|
|
borderRadius="5"
|
|
|
|
|
animate="false"
|
|
|
|
|
title="Loading..."
|
|
|
|
|
/>
|
2020-11-09 11:45:57 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
|
|
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ------------------- | :------: | :------: | :----: | :-------: | ------------------------------------------------ |
|
2020-11-09 13:02:08 +00:00
|
|
|
| `title` | `string` | - | - | `` | It's used to describe what element it is. |
|
2020-11-09 11:45:57 +00:00
|
|
|
| `x` | `string` | - | - | `0` | Sets the x offset |
|
|
|
|
|
| `y` | `string` | - | - | `0` | Sets the y offset |
|
|
|
|
|
| `width` | `string` | - | - | `100%` | Sets the width |
|
|
|
|
|
| `height` | `string` | - | - | `32` | Sets the height |
|
|
|
|
|
| `borderRadius` | `string` | - | - | `3` | Sets the corners rounding |
|
|
|
|
|
| `backgroundColor` | `string` | - | - | `#000000` | Used as background of animation |
|
|
|
|
|
| `foregroundColor` | `string` | - | - | `#000000` | Used as the foreground of animation |
|
|
|
|
|
| `backgroundOpacity` | `number` | - | - | 0.2 | Background opacity (0 = transparent, 1 = opaque) |
|
|
|
|
|
| `foregroundOpacity` | `number` | - | - | 0.15 | Animation opacity (0 = transparent, 1 = opaque) |
|
|
|
|
|
| `speed` | `number` | - | - | 2 | Animation speed in seconds |
|
|
|
|
|
| `animate` | `bool` | - | - | true | Opt-out of animations |
|
