component containing many loading styles

Usage no npm install needed!

<script type="module">
  import voxtecnologiaVoxPreload from 'https://cdn.skypack.dev/@voxtecnologia/vox-preload';


Vox Preload

Loading component for angular 5+ project

test a live exemple here: https://vox-tecnologia.github.io/voxPreload/


npm i vox-preload --save


we have three types of loading:

  • A global loading that appears over the application
  • A modal with a loading that pops up when the request is made
  • A local loading that appears under a designated input field


import the module that you need inside your application's module and the service inside the service with the request that will trigger the loading

import {LoadingGlobalModule, LoadingModalModule, LoadingInputModule} from 'vox-preload';
import {LoadingGlobalService, LoadingModalService, LoadingInputService} from 'vox-preload';
By default the components starts with the status set to hidden.
If you need to start with a visible loading you can set the "initialStatus" attribute to "show".
<vox-loading-global inititalStatus="show"></vox-loading-global>
usually "modal" and "global" will be imported inside the main module of the application, but "input" will be imported inside the componet related to it .

call the service inside the method that make the request:

  • calls the method "show" to start and "hide" to stop
public makeRequest(){
        .then(response => {
        .catch( error => {


  • receives a mandatory string argument and also an optional string as argument on 'show' method, this alter the default loading message.
loadingInputService.show('element-name', 'optional string message')
  • also receives two arguments on the 'hide' method, the first one refers to either the succes or error of the request adn it is required, the second is a optional message object.
loadingInputService.hide('element-name', 'error', {error: 'optional string message')}
loadingInputService.hide('element-name', 'success', {success: 'optional string message')}
<!-- this tag should be right under the input element -->
<vox-loading-input name="element-name"></vox-loading-input>


  • receives a mandatory string as argument on 'show' method to indicate witch 'loading' you wish to sow, this allows you to put many 'loading' elements on the same html.
loadingLocalService.show('element name')
  • also receives a 'name' argument on the 'hide' method.
loadingLocalService.hide('element name')
<!-- this tag should be right under the async element  -->
<vox-loading-local name="element-name"></vox-loading-local>


  • receives an optional content object as argument on 'show' method, this alter the default loading message.
loadingModalService.show({title: 'optional string title', message: 'optional string message'});
<!-- this tag should be in the main htmll of your app (usually app.component.html) -->

LoadingGlobalService doesn't receive any argument

<!-- this tag should be in the main html of your app (usually app.component.html) -->

global loading exemple Global loading exemple

modal loading exemple Modal loading exemple

input loading exemple Input loading exemple

global loading exemple Input response exemple