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.

  • By João Pereira
  • Last update: Dec 6, 2022
  • Comments: 14

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

Github

https://github.com/joaopereirawd/fakeLoader.js

Comments(14)

  • 1

    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
            });
    
  • 2

    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.

  • 3

    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

  • 4

    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

  • 5

    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.

  • 6

    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

  • 7

    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

  • 8

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

  • 9

    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

  • 10

    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.

  • 11

    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.

  • 12

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

  • 13

    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!

  • 14

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