kdf
Version:
101 lines (78 loc) • 2.8 kB
Markdown
# KDLoaderView
KDLoaderView is a view to display a spinning loading symbol. Built into some
Views, such as [KDButtonView][kdbuttonview]
## Usage
```coffee
view = new KDLoaderView
showLoader: true
loaderOptions:
color: '#ff0000'
shape: 'spiral'
appView.addSubView view
```
Creates a red spiral loader, that shows once it's added to another view.
## API Index
> class KDLoaderView extends [KDView][kdview]
> - [constructor](#constructor): (options={}, data) ->
> - [hide](#hide): ->
> - [show](#show): ->
## [Class](https://github.com/koding/kd/blob/master/src/components/loader/loaderview.coffee#L3)
KDLoaderView extends [KDView][kdview]. Please see that for inherited methods.
### [Constructor](https://github.com/koding/kd/blob/master/src/components/loader/loaderview.coffee#L5)
> - [constructor](#constructor): (options={}, data) ->
#### Args
1 **options**:
- Type: object
- **tagName**: The type of html element to house this loader spinner.
- Type: string
- Default: `"span"`
- **showLoader**: Whether or not to show the loader.
- Type: truthy
- Default: `false`
- **size**: The dimensions of this loader.
- Type: object
- **width**: The width of the loader, in pixels.
- Type: number
- Default: `24`
- **height**: The height of the loader, in pixels.
- Type: number
- Default: `24`
- **loaderOptions**: Options for the loader.
- Type: object
- **color**: The color of the loader, in 6 digit hex form.
- Type: string
- Default: `"#000000"`
- **shape**: The shape of this loader.
- Type: string
- Options: `"spiral", "oval", "square", "rect", "roundRect"`
- Default: `"rect"`
- **diameter**: The diameter of the loader.
- Type: number
- Range: `10` through `200`
- Default: `20`
- **density**: The number of visual objects within the loader. Such as dots
within the spinner.
- Type: number
- Range: `5` through `160`
- Default: `12`
- **range**: The amount of the loader that the animation covers. Such as
the "tail" on the spiral spinner.
- Type: number
- Range: `0.1` through `2`
- Default: `1`
- **speed**: The speed of the spinner.
- Type: number
- Range: `1` through `10`
- Default: `1`
- **FPS**: The Frames Per Second of the loading animation.
- Type: number
- Range: `1` through `60`
- Default: 24
### [hide](https://github.com/koding/kd/blob/master/src/components/loader/loaderview.coffee#L45)
> - [hide](#hide): ->
Hide the loader.
### [show](https://github.com/koding/kd/blob/master/src/components/loader/loaderview.coffee#L39)
> - [show](#show): ->
Show the loader.
[kdview]: ./kdview.md
[kdbuttonview]: ./kdbuttonview.md