Preloaders help in page-loading of specific web-page. PixelzUI provides seven classes for preloaders.


Following are the one type of pre-loader in PixelzUI.

  1. Circular
=>Other types are based on color class(es).


Following are the classes to use preloaders in your scripts.

  1. .ldr
  2. .ldr-xsm
  3. .ldr-sm
  4. .ldr-md
  5. .ldr-lg
  6. .ldr-xlg
  7. .crl-ldr

=>Other classes are based on color class(es).

How to use

  1. Add .ldr as class attribute in <div>.
  2. <div class="ldr"></div>
  3. Add .ldr-* inside parent <div> and add some border color class(es).
  4. <div class="ldr ldr-* br-bl"></div>
  5. Add .crl-ldr as extra class in this <div>.
  6. <div class="ldr ldr-* br-bl crl-ldr"></div>
=>* means (xsm, sm, md, lg & xlg).


Circular Preloaders


Edit Classes

 <div class="ldr">
  <div class="ldr-md br-pl crl-ldr"></div>

Leave a Reply

Your email address will not be published. Required fields are marked.