lightweight (5 kb) preloader for your web project in simple steps!
Preloadar is a lightweight and easy solution for preloading your web. Whether you are trying to preload automatically, manually, or on an asynchronous request, Preloadar makes it all very easy.
# Usage with NPM
$ npm install --save preloadar
<!-- include the script located on the `dist` -->
<script src="dist/preloadar.js"></script>
Load it with your favorite module loader or use as a global variable
// ES6 modules
import preloadar from 'preloadar'
// CommonJS modules
const preloadar = require('preloadar')
And remember to add styles
// Webpack
@import '~preloadar/preloadar.css';
@import '~preloadar/preloadar.min.css'; // minified
// Other
@import './node_modules/preloadar/dist/preloadar.css';
@import './node_modules/preloadar/dist/preloadar.min.css'; // minified
STEP 1 - In HTML, add a div element with the id of preloadar or any of your choice directly inside the body, e.g:
<div id="preloadar"></div>
STEP 2 - Simply initialize preloadar with html preloadar identifier in your script file:
preloadar.run().auto("#preloadar", {
animation: "spin",
onComplete: () => {
// Do something here
alert("Complete")
}
});
STEP 3 (Optional) - This is a use case when you are trying to preload your page when a user visits the page automatically, So for an even more smooth experience, At the div that wraps all your page elements to display after preloadar is complete, add an id of preloadarContainer.
Overall here is how your page will be structured when using STEP 3:
<body>
<div id="preloadar"></div>
<div id="preloadarContainer" class="...">
<!-- All page content goes here -->
</div>
</body>
In Preloadar you can easily change animation's options,
The library supports several animations:
spinspin1spin2rippleripple1ripple2waitingwaiting1waiting2flipflip1flip2frequencyfrequency1frequency2scale - child element required. support image, svg, etc.rotate - child element required. support image, svg, etc.topBaryou can add a custom animation of your choice by just adding your animation inside your preloadar identifier element and specify an empty string or custom in the animation option.
There are 4 ways to use this preloadar
Auto: load page automatically with preloadar when visiting the page
Use case:
preloadar.run().auto(`identifier`,{
animation: "spin",
...
});
Manual: load page manually with preloadar when visiting the page
Use case:
preloadar.run().manual(`identifier`,{
animation: "spin",
...
});
Show: display preloadar when this is called - this is comes in handy when you'd like to use preloadar to async load an item and others.
Use case:
preloadar.run().show(`identifier`,{
animation: "spin",
...
});
Hide: hide preloadar when this is called - this is comes in handy when you'd like to use preloadar to async load an item and others.
Use case:
preloadar.run().hide(`identifier`, {
onComplete: () => {
...
}
});
| Property | Type | Description | Default |
|---|---|---|---|
animation | String | add animation style to the preloadar | spin |
delay | Number | use case when tying to delay preloadar animation after complete before closing it | 500 |
start | Number | use case in preloadar manual type when trying to use start in preloader, start at 0 and ends at 100 by default | 0 |
end | Number | use case in preloadar manual type when trying to use end in preloader | 100 |
step | Number | use case in preloadar manual type when trying to use step in preloader | 1 |
color | String | change preloadar style color | #2b84e4 |
secondaryColor | String | change preloadar style secondary color | #e8e7e7 |
bgColor | String | change preloadar style bg color | #ffffff |
progressElement | String | preloadar progress when using manual type | none |
onActive | Function | run function when preloadar becomes active | none |
onComplete | Function | run function when preloadar is complete | none |
You can set options during Preloadar initialization, e.g:
preloadar.run().auto(`identifier`,{
animation: "spin",
delay: 200,
onComplete: () => {
alert("Preloadar complete")
}
});
use the preloadar generator here.
Created by Hashir. Released under the MIT License.
FAQs
lightweight (5kb) preloader for your web project in simple steps
We found that preloadar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.