Loader

<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>

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

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

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

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

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

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

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

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

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

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

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