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.

Overview

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

Comments
  • In options readme.md forgot to close the bracket

    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
            });
    
    opened by iRealNirmal 22
  • plugin simply doesn't work

    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.

    opened by sundowndev 6
  • Bars Appears on Top Left Corner Before Centering

    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

    opened by Behseini 4
  • Uncaught TypeError: jQuery(...).fakeLoader is not a function

    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

    opened by techmandan 2
  • Any way to trigger via boolean instead of timer?

    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.

    opened by SFDX-Sam 2
  • There is a bug when getting the window size in Firefox

    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

    opened by Javirln 2
  • Error using script with jQuery 3.3.1

    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

    opened by inglesuniversal 1
  • Dependency on jQuery

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

    opened by iambosspc 1
  • There is no git tags on GitHub repository

    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

    opened by sufuf3 1
  • Add CSS file to

    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.

    opened by drawcard 1
  • It does not cover navbar?

    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.

    opened by christopher-bobby 0
  • $.fakeLoader is not a function

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

    opened by LeMajstor 0
  • bgColor: gradient?

    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!

    opened by lovecoding-git 0
  • TypeScript typing files

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

    opened by hbulens 0
Releases(V2.0.0)
  • V2.0.0(Feb 25, 2019)

    FIX:

    • jQuery 3.0.0+ Support
    • Prevent loader flashing during the animation.
    • Sometimes spinner appear in the top left corner.
    • General Improvements

    ADD:

    • npm and yarn support
    • Spinner centered by css

    REMOVED:

    • Custom preload image
    • Centered spinner by Javascript
    Source code(tar.gz)
    Source code(zip)
Owner
João Pereira
Creative Front-end Developer
João Pereira
Matteo Bruni 4.7k Jan 4, 2023
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Parallax.js Simple parallax scrolling implemented as a jQuery plugin. http://pixelcog.com/parallax.js/ Please also check our v2.0.0-alpha! We'd be hap

PixelCog Inc. 3.5k Dec 21, 2022
Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using

Leonardo Santos 762 Dec 20, 2022
An animated and accessible command menu

kmenu ?? Animated and accessible cmdk interface Demo · NPM · Product Hunt · StackBlitz · CodeSandbox ?? Quickstart Having trouble? Unsure of something

Harsh Singh 474 Jan 4, 2023
Unobtrusive page transitions with jQuery.

smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browse

Miguel Pérez 4.5k Dec 21, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
Click effect inspired by Google's Material Design

Waves Click effect inspired by Google's Material Design http://fian.my.id/Waves/ Documentation Waves uses Situs to generate documentation. Here are so

Alfiana Sibuea 3.5k Dec 23, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Material Design Preloader!s A jQuery plugin that recreates the Material Design preloader (as seen on inbox). I was fascinated when I first saw the pre

Aaron Lumsden 376 Dec 29, 2022
A jQuery plugin that assists scrolling and snaps to sections.

jQuery Scrollify A jQuery plugin that assists scrolling and snaps to sections. Touch optimised. Demo http://projects.lukehaas.me/scrollify. More examp

Luke Haas 1.8k Dec 29, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Dec 30, 2022
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator

Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator. This engine is a dependency for any Haiku Animator components that are run on the web.

Haiku 757 Nov 27, 2022
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.7k Jan 8, 2023
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR

Florian DE LA COMBLE 34 Nov 25, 2022
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Dec 23, 2022
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Alex MacArthur 165 Dec 12, 2022
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Jan 6, 2023