Component library

Loader component

Last updated 2 November 2026

Defines a simplified preloader.

Live demo

<ins-loader
  state-title="Success!"
  state-message="Your order has been placed and is being processed."
  state-icon="success"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-loader>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
state-title	string	""	any	Defines title of loader
state-message	string	""	any	Defines message of loader
state-icon	string	""	processing, warning, Help, Error, Success, downloading, uploading	Defines icon of loader
icon-color	string	""	any	Defines icon color of loader
use-image	boolean	true	true, false	Toggle use image for 'processing' state
image-source	string	loading-loop.gif	any	Defines image path to used for 'processing' state loader

Examples

Direct Set Data

<ins-loader 
  id="directSetDataLoader">
</ins-loader>

<script>
  var loader = document.getElementById('directSetDataLoader');
  loader.addEventListener('didLoad', function(e){
    loader.stateTitle = 'Error!';
    loader.stateMessage = 'Whoops! A problem has occurred, please try again.';
    loader.stateIcon = 'error';
  });
</script>

Static Data Source

<ins-loader
  state-title="Success!"
  state-message="Your message has been sent successfully."
  state-icon="success">
</ins-loader>

Processing - default

<ins-loader
  state-title="Processing"
  state-message="Please wait, we're processing your request."
  state-icon="processing">
</ins-loader>

Processing - animated SVG

<ins-loader
  use-image=false
  state-title="Processing"
  state-message="Please wait, we're processing your data."
  state-icon="processing">
</ins-loader>

Warning

<ins-loader
  state-title="Warning!"
  state-message="There was a problem with your network connection."
  state-icon="warning">
</ins-loader>

Help

<ins-loader
  state-title="Need help?"
  state-message="Please contact our support team."
  state-icon="help">
</ins-loader>

Error

<ins-loader
  state-title="Error!"
  state-message="A problem has occurred while submitting your request."
  state-icon="error">
</ins-loader>

Success

<ins-loader
  state-title="Success!"
  state-message="You message has been sent successfully."
  state-icon="success">
</ins-loader>

Downloading

<ins-loader
  state-title="Downloading"
  state-message="Your file/s are being downloaded."
  state-icon="downloading">
</ins-loader>

Uploading

<ins-loader
  state-title="Uploading"
  state-message="Your file/s are being uploaded."
  state-icon="uploading">
</ins-loader>