Go one step further with our solutions for creating an intuitive, personalized experience.
Spinner components indicate when an action is in progress.
Create a spinner using the h_spinner class.
<div class="h_spinner"></div>
The small, compact, comfortable and large classes change the size of the spinners.
<div class="h_spinner small"></div>
<div class="h_spinner compact"></div>
<div class="h_spinner"></div>
<div class="h_spinner comfortable"></div>
<div class="h_spinner large"></div>
Use the primary, danger and accent classes to style the spinners.
<div class="h_spinner"></div>
<div class="h_spinner primary"></div>
<div class="h_spinner danger"></div>
<div class="h_spinner accent"></div>
To start the spinner animation within a button, place a spinner in the button, and use the h_spinner-active class.
<button class="h_btn h_spinner-active">
<span class="h_spinner"></span>
<span class="h_spinner-loading">Loading</span>
</button>
The method spinner.loading(this) allows to launch the spinner animation.
In this case, the h_spinner-idle and h_spinner-loading classes will be impacted.
Use the h_spinner-idle class to display the basic content. And the h_spinner-loading class to display the content during loading.
<button class="h_btn primary" onclick="spinner.loading(this)">
<span class="h_spinner-idle">Button</span>
<span class="h_spinner"></span>
<span class="h_spinner-loading">Loading</span>
</button>
<button class="h_btn danger small" onclick="spinner.loading(this)">
<span class="h_spinner-idle">Small Button</span>
<span class="h_spinner"></span>
<span class="h_spinner-loading">Loading</span>
</button>
You can target another button by calling its id name, e.g. spinner.loading("idName").
The spinner.idle() method stops the animation.
<button class="h_btn" id="myBtn" onclick="spinner.loading(this)">
<span class="h_spinner-idle">Click here</span>
<span class="h_spinner"></span>
<span class="h_spinner-loading">Loading</span>
</button>
<button class="h_btn danger outlined" onclick="spinner.idle('myBtn')">Stop loading</button>
<div class="h_spinner small"></div>
<div class="h_spinner compact"></div>
<div class="h_spinner"></div>
<div class="h_spinner comfortable"></div>
<div class="h_spinner large"></div>
<div class="h_spinner"></div>
<div class="h_spinner primary"></div>
<div class="h_spinner danger"></div>
<div class="h_spinner accent"></div>
| Class | Definition |
|---|---|
| h_spinner | Create a spinner. |
| small | add small style. |
| compact | add compact style. |
| comfortable | add comfortable style. |
| large | add large style. |
| primary | add primary style. |
| accent | add accent style. |
| danger | add danger style. |
| Methods | Definition |
|---|---|
| spinner.loading(element) | Run the spinner. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings