# JavaScript & CSS

Include JavaScript and CSS files in HEAD tag.
jQuery UI is only required when multiple backgrounds are enabled in IE7,8,9.

                        <link rel="stylesheet" type="text/css" href="royal_preloader.css" />
                        <script type="text/javascript" src="jquery.js"></script>
                        <script type="text/javascript" src="royal_preloader.min.js"></script>
                        <script type="text/javascript">
                            var images = {
                                'wallpaper1':     'http://www.melonhtml5.com/images/wallpaper/1.jpg',
                                'wallpaper2':     'http://www.melonhtml5.com/images/wallpaper/2.jpg',
                                'wallpaper3':     'http://www.melonhtml5.com/images/wallpaper/3.jpg',
                                'Metro Gallery':  'http://www.melonhtml5.com/images/metro_gallery.png',
                                'Emu Slider':     'http://www.melonhtml5.com/images/emu_slider.png',
                                'Cut the Rope':   'http://www.melonhtml5.com/images/cut_the_rope.png',
                                'All in One Tab': 'http://www.melonhtml5.com/images/tab.png'
                            };

                            // config
                            Royal_Preloader.config({
                                mode:       'number',
                                images:     images,
                                timeout:    10,
                                showInfo:   true,
                                background: ['#000000', '#FF0000', '#0097AA', '#F29500', '#C23916', '#94C849', '#6FA014', '#91009B']
                            });
                        </script>

# HTML Code

Add a class name "royal_loader" to the BODY tag

                    <body class="royal_loader">

# Configurations

- modestring
  Default value: number
  Possible values: text, number, logo.
  number: a loader image is shown, the loading progress is displayed in percentage values and loading details are also displayed on each image load.
  text: a pre-defined text will be displayed in the center of the screen, and fades out from left ro right.
  logo: displaying a logo in the screen center, and fades out from bottom to top.

                              Royal_Preloader.config({
                                  mode: "text"
                              });

- imagesJSON
  Default value: empty.
  Define images to be preloaded. Format: {name: image_url}. "name" is displayed when showInfo is turned on.

                              var images = {
                                  'wallpaper1':     'http://www.melonhtml5.com/images/wallpaper/1.jpg',
                                  'wallpaper2':     'http://www.melonhtml5.com/images/wallpaper/2.jpg',
                                  'wallpaper3':     'http://www.melonhtml5.com/images/wallpaper/3.jpg',
                                  'Metro Gallery':  'http://www.melonhtml5.com/images/metro_gallery.png',
                                  'Emu Slider':     'http://www.melonhtml5.com/images/emu_slider.png',
                                  'Cut the Rope':   'http://www.melonhtml5.com/images/cut_the_rope.png',
                                  'All in One Tab': 'http://www.melonhtml5.com/images/tab.png'
                              };

                              Royal_Preloader.config({
                                  images: images
                              });

- timeoutInt
  Default value: 10 (seconds).
  When timeout is exceeded, no matter images have been all downloaded or not, the loading screen will finish and your website will be shown.

                              Royal_Preloader.config({
                                  timeout: 10
                              });

- opacityInt
  Default value: 1.
  Possible values: 0 ~ 1. When opacity is set to be less than 1, the loading overlay will have a transparent backgorund and you will be able to see through the website.

                              Royal_Preloader.config({
                                  opacity: 0.5
                              });

- backgroundarray
  Default value: ["#000000"].
  An array containing the colors for the background. Colours transit from one to another during loading.

                              Royal_Preloader.config({
                                  backgorund: ['#000000', '#FF0000', '#0097AA', '#F29500', '#C23916', '#94C849', '#6FA014', '#91009B']
                              });

- textString
  Default value: loading...
  Set the loading text. (this only works when mode is set to "text")

                              Royal_Preloader.config({
                                  text: "MelonHTML5 - Royal Preloader..."
                              });

- logostring
  Default value: empty string.
  The URL of the logo image. (this only works when mode is set to "logo")

                              Royal_Preloader.config({
                                  logo: 'http://www.example.com/logo.jpg'
                              });

- showPercentageBoolean
  Default value: true.
  Show the loading progress in percentage values. (this only works when mode is set to "number")

                              Royal_Preloader.config({
                                  showPercentage: true
                              });

- showInfoBoolean
  Default value: true.
  When showInfo is set to true, image names are displayed in the loading screen. (this only works when mode is set to "number")

                              Royal_Preloader.config({
                                  showInfo: true
                              });

- onCompleteFunction
  Default value: null.
  Callback function to be executed after loading is completed.

                              Royal_Preloader.config({
                                  onComplete: function() {
                                      alert('Woo hoo, loading images are complete');
                                  }
                              });

# Loader Image

To change the loader image, simply create a loader.gif in images folder.