Loader

Shows a loader.

Features/Functionality

Shows a loader with parent container's dimension and given label and icon.
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

jquery
font-awesome
shared styles
shared scripts

HTML Structure

<require from="{user_path}/loaders/loader"></require>
<cst-loader ext-label.bind="{label}" icon-name.bind="{iconName}" options.bind={options} loader-parent-class.bind={loaderParentClass}></cst-loader>

Bindable Properties

Property Name	Data Type	Required	Decription
extLabel	string	Yes	Label to be shown on component.
extShow	boolean	No	As per value, loader will display or not
iconName	string	No	Name of the icon to be mapped with class
options	object	No	Option for the component. Use for override css color and pageLabels
loaderParentClass	string	No	Class container on top loader will come with the class dimension

Structure of bindable properties

extLabel

extLabel = '' // Label with loader icon

iconName

iconName = '' // loader icon

options

options = {
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour porperty
}

loaderParentClass

loaderParentClass = '' // parent container class in which we want loader

CSS Overrinding

Following classes are given to override CSS:
- .cst-loader-element-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Working Example

HTML

<template>
  <require from="./shared/core_comp/loders/loder"></require>
  <div>
    <cst-loader ext-label.bind="label" icon-name.bind="iconName" options.bind="options" loader-parent-class.bind="loaderParentClass"></cst-loader>
  </div>
</template>

CSS

.cst-ex-loader{
    .cst-loader {
        background-color: rgba(0,0,0,.12) !important;
        color: #000000 !important;
    }
}

class MyCls{
    constructor(){
        this.label = "Loading data";
        this.iconName = 'SPINNER_SPIN';
        this.loaderParentClass = 'cst-parent-class'
    }
}
export { MyCls }