Questions tagged [preloader]
Preloader is usually referred to the Gif image shown to user to indicate wait or processing state.
702
questions
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.
...
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;...
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 ...
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 ...
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 ...
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 ...
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 ...
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=...
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 ...
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
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 ...
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 ...
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; ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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
(...
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 ...
-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.
...
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 ...
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, ...
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 ...
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 ...