Questions tagged [preloader]

Preloader is usually referred to the Gif image shown to user to indicate wait or processing state.

Filter by
Sorted by
Tagged with
0 votes
0 answers
26 views

Wordpress preloader for admin showed as soon a back end link is clicked

I have found the follow code that show a preloader when loading a Wordpress Admin page add_action( 'admin_head', 'dashboard_preloader' ); function dashboard_preloader() { ?> <script type="...
0 votes
0 answers
38 views

Lottie Preloader only show once per session

I have a working preloader that shows a lottie animation when the page is loaded. But I want it to show up only one per session. So that it doesn't show up every time someone opens or loads the page. ...
  • 1
0 votes
2 answers
40 views

How to prevent preloader image view in URL preview? I want to see main image of news (or blogs) in URL preview

I use preloader in website: https://adl.az/ The file format of the preloader image is "PNG". It's not "GIF". The Problem is: If I send website URL to anyone or share it on any ...
0 votes
0 answers
33 views

How to create a preloader mask with CSS/JS?

I'm trying to recreate a part of the preloader of this website - specifically the part where the "red box" swipe ups and reveals what's beneath. I tried playing with CSS transitions, but I ...
0 votes
0 answers
20 views

How to loads the page preloader when user click on nav item

In my web project, I have used a preloader to load when a page loads. But I want to load it whenever the user clicks the nav item, if the item clicks show the preloader, and then when the result loads,...
0 votes
1 answer
30 views

JavaScript fail to change display property (Uncaught (in promise) TypeError: loader.style is undefined)

I'm making a preloader of a website and I fail to hide it after few seconds. I recieve an error "Uncaught (in promise) TypeError: loader.style is undefined" I found that the javascript get ...
0 votes
0 answers
17 views

Unable to get the desired animation

I'm trying to zoom in and zoom out animation using css for preloader but unable to get the desired result #preloader{ background: black; background-repeat:no-repeat; background-size: cover;...
  • 1
0 votes
0 answers
23 views

Show Vanille Preloader only once per site visit

I have this code for a vanilla preloader: <div class="vanilla-preloader" ></div> <script> document.addEventListener('DOMContentLoaded', function() { let ...
  • 3
0 votes
2 answers
160 views

Vue router isLoading show loader div in App.vue

I have a simple problem. I'm using Vue3 with vite, typescript and router, and I can't figure out, how to trigger a loading screen whilst the user clicks on router paths. I successfully understood and ...
  • 45
0 votes
0 answers
52 views

Preloader for videos + images in react?

Hello does anyone know a good method to create a preloader for videos + images in react ? I've already tried to check with to create a Video component with a isLoaded state and make it true when the ...
0 votes
0 answers
155 views

Delay in nuxt.js just for the preloader

nuxt.config.js import colors from 'vuetify/es5/util/colors' export default { // Global page headers: https://go.nuxtjs.dev/config-head ssr: false, loadingIndicator: { name: '~/preloader2....
0 votes
0 answers
22 views

Preloader finishes early

I've got a bigger .json lottie file on the homepage and the preloader finishes loading before this .json file is loaded and displayed. The lottie only appears after around 3-4 seconds after the ...
  • 1
0 votes
1 answer
120 views

Content Loading is shown on Page before Preloader appears

Hello Guys I have an issue with the content loading of my webpage. I see the textfields and images laoding before the preloader sequence is starting. This is my basic html structure <!DOCTYPE html&...
0 votes
0 answers
24 views

How to add shortcode for captcha into preloader on my wordpress website

my task is very simple - display to visitors preloader with captcha in it. I am using WC Captcha plugin, that allows to insert shortcode [wpcaptcha] where you want. For preloader I use plugin WP Smart ...
0 votes
1 answer
150 views

How to show preloader except when navigate between pages?

The preloader/loading page is a whole page div with an image inside it. It works as an introduction page for my website. I would like this preloader/loading page is displayed only under certain ...
  • 3
0 votes
0 answers
46 views

After preloader rendering react app get a blank page for a second

I have add preloader to the react app. For the clarity I added the code as below. In the index.html file <style> .svgLoader { animation: spin 0.5s linear infinite; margin: ...
0 votes
0 answers
99 views

Loader on form button

I am trying to add a loading spinner to a "submit" button on a form for uploading an image file. I would like to have a single custom button to select and then automatically submit the file ...
-1 votes
2 answers
353 views

How to color the CSS loader?

I have working code for a CSS preloader at CSS preloader sample I would like the animated preloader to be colored. I tried adding the style color: red !important; to various styles to the CSS class ...
  • 20.2k
1 vote
0 answers
46 views

css preloader loads but not act as preloader. appears after footer

css based preloder is loads in the footer of page. not acting like preloader. seems code conflict or i missed some code. short clip of preloader https://www.awesomescreenshot.com/video/9880883?key=...
  • 19
0 votes
0 answers
62 views

How to show a loader between server request and response

So my webpage has a 'Read More' link which loads in about 1.5-2 seconds between which it just freezes which could lead to a bad user experience. Moreover, the freeze also makes the user tap on the ...
  • 19
2 votes
0 answers
371 views

How do I add mp4 file as a preloader screen on HTML CSS website?

As you may see below I have used video as to show as my pr eloader screen but this doesn't display anything. HTML code - <div class="loader-wrapper"> <video autoplay loop ...
0 votes
0 answers
76 views

Make Nextjs preloader running only once

I have created a preloader that should run before the app content is displayed at initial page load. At this point the prealoader runs as expected at the first load, it does not reload when switching ...
  • 1,017
1 vote
0 answers
52 views

how to build progress bar with precentage in python and js

i have a GUI in js css and html, and a server in python. the server is running tests automatically and i want to show the user how many tests has been done. each test is located in a a configuration ...
  • 29
0 votes
1 answer
190 views

Can we add buttons for input on a Splash screen?

I have to work on an app where the user has to interact with the app fast ( its for an emergency) Is there a way to implement a pair of buttons on a preloader screen / splash screen on a PWA ? PS:- I ...
0 votes
0 answers
20 views

How To Fade In A Preloaded Using JavaScript

My JavaScript FadeOut works fine but FadeIN does not work. I have tried to FadeIn with different codes but the FadeIn effect does not work. When my page is about to load, my Preloaded just appears ...
  • 63
0 votes
1 answer
40 views

Why does my preloader vanish before the page loads?

My preloader disappears before the content is fully loaded,so technically it's useless. How can I fix it also that I've tried various approaches without success? Also, the gif is incredibly enormous; ...
user avatar
0 votes
1 answer
295 views

Im not being able to load preloader when i refresh the webpage

Hi i have two html files Preloader.html (which is my preloader) index.html (which is my mainpage/homepage) now my problem is that when i load my site from preloader.html then it works perfectly like ...
0 votes
1 answer
387 views

Set maximum time for preloader

Does anyone know of a way to set a maximum time that a preloader can display? In the event that someone has a slow connection, it would be useful to make the preloader disappear after a few seconds ...
  • 11
0 votes
0 answers
42 views

Image Preloader with CSS Colour not displaying

I'm trying to add preloader to wordpress website using divi attached. However, I'm having problems getting the preloader to even display. This is the '.gif' I'm using, and ideally I'd like it to be a ...
  • 413
0 votes
1 answer
41 views

Why console.log shows me that there are 0 loaded images in the html document?

I have been making preloader based on counting images in the html document according to one youtube tutorial. I got stuck and don't understand why console.log command says that the amount of loaded ...
0 votes
0 answers
292 views

WIX JS - Custom Preloader Screen

I have got a site made with wix and I found this code that allows you for a custom preloader screen. It works fine, however it keeps triggering whenever the site is refreshed or you press the back ...
  • 3
1 vote
1 answer
3k views

How To Disable Scrolling During Loading? [closed]

I'm working on my personal website and have implemented a preloader. After adding a second div to my website, I noticed I can scroll during the page loading. I dunno about you but I find that ugly and ...
  • 59
3 votes
1 answer
484 views

JAVAFX SplashScreen with an animated gif

Is it possible to have an animated gif or video in my splash screen. Here is my code Launcher class: ** EDITED With all needed files to run simple project. package com.example; import javafx....
-3 votes
1 answer
69 views

The menu (Navigation bar) becomes collapse unstylish for a few second. need Solution

I am facing a problem after deactivating the pre-loader. When someone tries to open the website all the menu (Navigation bar) becomes collapse unstylish for a few seconds. After a while when the page ...
0 votes
0 answers
473 views

Implement a random positioning but to also cover the viewport in React/Next.js

I've got a bunch of images flashing on a preloader screen of a Next.js application with GSAP like a collage and I'm using a ${Math.floor((Math.random() - 0.5)* 500)}px to randomly splatter them on the ...
  • 1,939
3 votes
1 answer
426 views

How to implement Youtube like preloader

I came across a pre-loader in YouTube, which look like this I like to implement this type of preloader in my website, Couldn't find how to implement this type of preloader, It changes according to the ...
1 vote
2 answers
156 views

Why does my preloader not disappear once the website is loaded?

I have been watching multiple videos on how to implement preloaders and tried to follow them but never end up with a preloader that disappears once the website is loaded. This is one of the methods ...
0 votes
0 answers
89 views

JavaFX application showing an empty stage for a fraction of a second before a scene embedded with gif starts in a slow system?

We have a scene that has opacity = 0 initially and gradually increases the opacity = 1 for a nice and smooth fade-in animation. But when the scene is added to a stage, in slow systems, the stage is ...
0 votes
1 answer
304 views

Preloader doesn't fade out after page is loaded

I added a preloader and it doesn't fade out after loading the page! My website is running on wordpress. i don't know what's the prob;lem thank you for your help HTML: <div class="loader-...
0 votes
1 answer
334 views

Problem with Preloader component in Vuejs

I downloaded an HTML template using bootstrap and jquery, then I tried to put them into VueJs. I worked fine until I used the router to navigate between pages. I have a Preloader component in two Home ...
0 votes
1 answer
90 views

Animations trigger before page loads

I created a website that uses animate.css to animate elements. But the problem is that the animations trigger before the page loads. I avoid using the delay property provided by animate.css as the ...
  • 37
0 votes
1 answer
126 views

Removing Preload Div and JS breaks website

I created a site with a preloader and when I was done decided I no longer want it, but when I remove the code for it, it won't load past it any longer. It just displays a grey box when attempting to ...
1 vote
0 answers
885 views

Error package com.sun.javafx.application is not visible

So when i want to add preloader to my app and add line with LauncherImpl, I have a problem with launch my app beacuse i got error like: java: package com.sun.javafx.application is not visible (...
  • 85
0 votes
2 answers
80 views

How can I make a gif icon to show on my pre-loader before my website loads

I added this code to my website for a pre-loader to show before my website loads but I was only able to make only a background color show before my website loads. I am trying to make a gif icon to ...
  • 63
-1 votes
1 answer
363 views

Fade preloader on page load

I have a gif which I want to set as a website preloader. But when I do so the preloader doesn't dissappear even after page load. I have tried various java scripts but none of them proved to be of use. ...
  • 37
1 vote
1 answer
587 views

Change preloader icon to image

I'm using this preloader code from this website. This code rotating fontawesome icons after a few second and come with the percentage. Basically, I want to display image instead of fontawesome icon. I ...
  • 656
0 votes
2 answers
93 views

JavaFX Preloader splashscreen not working when launched with install4j

I have added a splash screen to my standalone JavaFX application (Java 8), using the Preloader api. Everything works fine from the IDE and when running the packaged jar from the command line. However, ...
  • 377
0 votes
1 answer
163 views

Immediately showing website Home page before the preloader page render

I have created a website from React. recently I have implemented a preloader page for my website. But the issue is immediately showing website Home page before that preloader page render. How I fix ...
  • 171
0 votes
1 answer
61 views

Why the preloader gif stops working after refreshing 3-4 times

When I try refreshing the my html 3-4 times the preloader gif will work but after refreshing 3-4 times the preloader is shown but the gif is stucked you can run the code below and wait some time the ...
0 votes
0 answers
210 views

Pre-loader is not loading instantly on mobile devices

const blackLogo = document.querySelector(".preloader__fillBlack"); const whiteLogo = document.querySelector(".preloader__fillWhite"); const blackLogoS = document.querySelector(".preloader__fillBlack ...

1
2 3 4 5
15