What is fakeLoader.js
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
Check out the demo http://joaopereirawd.github.io/fakeLoader.js/
Current Version
V2.0.0
1. Installing
yarn add jq-fakeloader
or
npm i jq-fakeloader
2. Include CSS
<link rel="stylesheet" href="../node_modules/dist/fakeLoader.min.css">
javascript
dependencies
3. Include <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="../node_modules/dist/fakeLoader.min.js">
fakeLoader
placeholder in the HTML Document
4. Include <div class="fakeLoader"></div>
5. Basic Initialize
<script>
$.fakeLoader();
</script>
6. Options
timeToHide
//Time in milliseconds for fakeLoader disappear
spinner
//'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
bgColor
//Hex, RGB or RGBA colors
Support
If you encounter an issue or want to request a feature, you can create an issue
In options readme.md forgot to close the bracket
replace it to $("#fakeloader").fakeLoader({
plugin simply doesn't work
I followed the very simple guide at http://joaopereirawd.github.io/fakeLoader.js/
and the plugin doesn't work at all, I have the css and js files included, the call at the footer :
<script type="text/javascript"> $("#fakeloader").fakeLoader({ timeToHide:1200, //Time in milliseconds for fakeLoader disappear zIndex:"999",//Default zIndex spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' bgColor:"#2ecc71", //Hex, RGB or RGBA colors imagePath:"yourPath/customizedImage.gif" //If you want can you insert your custom image }); </script>
jquery is also included version 2.1.4, I don't understand why this is not working :/ halp!!
edit: also nothing in the dev console of chrome.
Bars Appears on Top Left Corner Before Centering
Hi, First of all thank you for sharing this great plugin! I am trying to use your solution on This demo http://bazikontarin.com/Paralax Using Bootstrap 3 framework but for a reason the Bars appears first on top left corner and then moves to center! This might be watchable if you refresh the page several times! Can you please let me know why this is happening? and how I can fix it? Thanks
Uncaught TypeError: jQuery(...).fakeLoader is not a function
Hello. I know this is little bit old, but it's the best of what I found. I'm using newest jQuery(CDN). I'm new to jQuery, but other plugins normally works. I'm using full (fakeLoader.js) version. I'm trying to show it when user clicks button, because it starts uploading file. When I click the button, nothing hapens and in console, it show the following:
Why?
Thanks for answer
Any way to trigger via boolean instead of timer?
I'm looking for a way to trigger it based on a boolean value.
Sometimes the time taken to execute an action differs, so I'd prefer to be able to set a flag to display whether to display the loader or not.
There is a bug when getting the window size in Firefox
When retrieving the Window's size using the jQuery function .width() and height() on the lines: 106 and 107 in the file fakeLoader.js/demo/js/fakeLoader.js, the functions return 0.
Please read: http://stackoverflow.com/questions/12937494/why-does-firefox-return-0-as-the-value-of-window-height
Cheers
Error using script with jQuery 3.3.1
Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load (jquery.min.js:2) at fakeLoader.min.js:1 at fakeLoader.min.js:1
Any pointers?
Regards
Dependency on jQuery
This is actually a request. Maybe you could make a version that doesn't rely on jQuery? This might be useful especially to developers who prefer not to use jQuery in their project, it's 2019 already :)
There is no git tags on GitHub repository
Hi @joaopereirawd , We are cdnjs team, we're going to host this library. The git auto-updater in cdnjs relies on git tags so that it can recognize the correct version and automatically update the repo. Could you please add git tags for the repo?
If you have any suggestions, please let me know. Thank you.
cdnjs/cdnjs#8337 cdnjs/cdnjs#8360
Add CSS file to "main" dependency
Proposal to add the project's CSS file to the "main" dependency spec, so tools such as https://github.com/austinpray/asset-builder can auto detect this file and include it during Gulp builds.
It does not cover navbar?
I tried this plugin and it worked, but it simply does not cover my navbar (I am using bootstrap 4 alpha). I have tried putting it on top of my page (below body and before navbar) and still nothing changed.
$.fakeLoader is not a function
I'm using CDN from cdnjs im my project. jQuery version is 3.3.1 and I'm still getting this error. Am I be missing out something? Both CSS and JS are loaded.
bgColor: gradient?
Hi Thank you for such great package. Is it possible to set gradient color for bgColor?
linear-gradient(red, yellow);
I think it seems impossible. Then how can I set it?
Thank you!
TypeScript typing files
I believe adding a TypeScript type declaration (.d.ts) file would be useful for those who are transitioning into TypeScript but still rely on jQuery.
I would appreciate it if you'd add this to a package
@types/jquery-fakeloader
(or similar).