Skip to main content
Version: 1.17.1

Spinner

Overview

The Spinner component allows the user to display a rolling spinner.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
textstring""Text to be displayed at the bottom of the loader iconDisplays the default value if the value for text is unspecified or empty
containerHTMLElementdocument.bodyTarget element to append the componentBy default, it uses the body of the top-level document object, so it's simply document.body most of the time
Will result an error if the value of container is not an HTMLElement
info

If the text is unspecified or empty, consider assigning a visually-hidden class and given the word "Now loading..." in a hidden state for accessibility.

Constructor

Spinner(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Method

Here is a list of available methods:

open()

Show the component

Parameter

none

Return

none

close()

Hide the component

Parameter

none

Return

none

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

Name
--kuc-spinner-loader-width
--kuc-spinner-loader-height
--kuc-spinner-loader-color
--kuc-spinner-text-font-size
--kuc-spinner-text-color

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const spinner = new Kuc.Spinner({
text: 'now loading...',
container: document.body
});

spinner.open();
spinner.close();