joaopereirawd / 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.

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">

3. Include javascript dependencies

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="../node_modules/dist/fakeLoader.min.js">

4. Include fakeLoader placeholder in the HTML Document

<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

fakeloader.js's Issues

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

Can I replace Jquery with Zepto Js?

Can I replace Jquery dependency with Zepto Js? Thanks.

Uncaught TypeError: a.indexOf is not a function” error on load

This error might be caused by jquery event aliases like .load, .unload or .error deprecated since jQuery 1.8. Look for these aliases in your code and replace them with .on() to register listeners instead. Example:
fakeLoader.js [line:120]
$(window).load(function(){...});

becomes:

$(window).on('load', function(){ ...});

fakeloader on 1 page.

Hi there,

I work in liferay 7.0 and got the script to work and customized very happy with that. 👍
Only problem for me it loads on every page now, I only want it on my homepage. is there a method to have it on a single page only?

Regards,
Louie Figaroa

In options readme.md forgot to close the bracket

replace it to
$("#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
        });

Does not animate in Internet Explorer.

I really like this, but the demo's do not work in Internet Explorer (using 9 on Windows 7).

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.

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

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).

Time to hide

Instead of time to hide, is there a way to make it wait until page is fully loaded to hide?

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

npm support

Isn't it available on npm?
If no, will it be available on near future?
Thank you

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 :)

npm package

please make a browserify-compatible npm package for this!

problem before preloader

hello,
i see some images and text before the preloader image....

check this https://goo.gl/Drfjne

anyone have the same problem?

thanx

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

fakeloader doesn't work with 3x version of jquery

Don't use the slim 3.3.1 version of jquery for fakeloaderjs because in 3x version of jquery timeToHide does not work.

Just Typo Error in your Instructions

You say to add this -

• which is fine but there is a little text error here -
  $("#fakeloader").fakeLoader();
• L for loader is not capital which got me confused for a sec.
  i hope it helps other people out.

Thank for this plugin 😄

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.

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!

Loader loads in upper-left corner before centering on page

Hi João, thank your for this great, simple plugin!

I've got it all set up with a custom animated SVG and it's working fine except for the loading part. The SVG briefly shows up in the upper-left corner before centering on page. Is there a way to center the container before it loads?

Thanks for your help.

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.

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

How can i pro-grammatically close the fake loader. i want to close it on an event.

I want to start and stop the fake loader pro-grammatically on an event success. How can i achieve this ?

Show and Hide (Mostrar e Ocultar)

Oi João,

Como faço para ocultar o loader sem ter que esperar o timeout?

Por exemplo: Quero abrir o loader ao clicar em submeter um formulário via Ajax e após a resposta quero ocultar o loader.

Usei $("#fakeloader").fadeOut("fast");
Mas quando tento abrir o loader novamente ele não exibe, ou seja, funciona uma única vez.

Teria como implementar:

$("#fakeloader").fakeLoader("show");
$("#fakeloader").fakeLoader("hide");

???

Obrigado e parabéns pelo projeto!

$.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.

It blinks when switch between pages?

I realized it that when implemented on multiple pages, it sort of refresh the page before the loading effect appears