UNPKG

kdf

Version:

KD: a non-document focused UI Framework for web applications.

101 lines (78 loc) 2.8 kB
# 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