colourLoader: a jQuery pre-loader
What is it?
colourLoader is a preloader - it cycles through either rainbow colours, random colours, or colours of your choice before all the assets on your page have loaded. Once everything has loaded, it disappears.
Cool! How do I use it?
Good question. To use colourLoader, you'll need:
- the jQuery library
- the jQuery.color plugin
- the colourLoader plugin plus CSS file (also available as a SCSS partial
Make sure that the script files are all loaded in the head of your html in the order listed above, with your JS file coming last, and ensure that the colourLoader css file precedes your own.
After that, you'll need to include the below code in your html, right after your <body>tag:
<div class="loader"></div>
Then, you'll need the below code included in your JavaScript file, inside your $(document).ready():
$(document).ready(function() {
$('body').colourLoader("<insertcolourshere>");
});
You'll need to replace <insertcolourshere> with either "rainbow", "random", or "myColours". If you choose "myColours", you'll also need to pass in an array of colours as an argument -- see below for an example.
##Options colourLoader also offers a few other options that can be passed in as parameters:
| Parameter | Default | Options |
|---|---|---|
| myColourList | false | An array of colours (name, hex, RGB(A), or HSL(A). |
| opacity | 1 | Any number between 0-1 (0 is transparent and 1 is fully opaque) |
| speed | 300 | Number of milliseconds (higher# = slower). |
| Note: myColourList is only available if you select "myColours" as your first argument. Example: ["red", "#fff", "rgb(124,210,25)"] |