You also can benefit from the last version of fontawesome (6.4.0)
An example you can try (this is to be replaced in the first part of the code, as you can easily see. Careful the <link rel is different)
I already gave a code to dynamically change the text in the loader screen according to the page title, but maybe you would like something else? Feel free to ask, I will tell you if it’s too much work to do or if it’s feasible in no time.
Yes, I saw that, so cool!! My page title are just not very exciting
In my case, I would love to have placeholders for different strings that alternate, not the page’s title.
Is that complex?
You decide of a text according to the url slug. For example when the url slug is “/this” then the displayed text will be “Welcome to this this funny page, we are loading happiness”. You can add as many else if as you wish
<script>
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
var loadingText = '';
var url = window.location.href.toLowerCase();
if (url.includes('/this')) {
loadingText = 'Welcome to this this funny page, we are loading happiness';
} else if (url.includes('/resources')) {
loadingText = 'Loading our resources, knowledge needs patience.';
} else {
loadingText = 'Loading, please wait...';
}
document.querySelector('.loading-text').textContent = loadingText;
</script>
It works on my end! - I put it in the header below the rest of the code (below styles). Does this suit you?
I think @Tim_ClimatEU possibly looks for full randomness, regardless of the page title.
Something like this might work:
<script>
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
var loadingTexts = [
'Loading, please wait...',
'Welcome to this funny page, we are loading happiness',
'Loading our resources, knowledge needs patience.',
'Hold tight, we are preparing something special for you',
'Get ready for awesomeness, we are loading...',
'Patience is a virtue, we are loading the page...',
];
var randomIndex = Math.floor(Math.random() * loadingTexts.length);
var loadingText = loadingTexts[randomIndex];
document.querySelector('.loading-text').textContent = loadingText;
</script>
Aah, silly me, it works, I didn’t take a proper look and thought this was the code for the header.
It works perfectly, thanks so so much guys!!! Game changer, truly! @matthieu_chateau@J_1
Here is where I got so far - I am working on something for user onboarding. I want to have this screen load as a final onboarding step whilst I have other objects run in the background.
[this is for custom code blocks and does not overlay the screen]
<div style="position: relative;">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div id="loading-spinner">
<p class="loading-text"></p>
<i class="fas fa-spinner fa-spin"></i>
</div>
<style>
#loading-spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#loading-spinner i {
font-size: 30px;
color: #000000;
}
.loading-text {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
color: #000000;
margin-right: 30px;
margin-top: 20px;
}
@media (max-width: 768px) {
#loading-spinner {
flex-direction: column;
}
.loading-text {
margin-left: 0px;
}
}
</style>
<script>
var loadingTexts = [
'Loading, please wait...',
'Welcome to this funny page, we are loading happiness',
'Loading our resources, knowledge needs patience.',
'Hold tight, we are preparing something special for you',
'Get ready for awesomeness, we are loading...',
'Patience is a virtue, we are loading the page...',
];
var randomIndex = Math.floor(Math.random() * loadingTexts.length);
var loadingText = loadingTexts[randomIndex];
document.querySelector('.loading-text').textContent = loadingText;
setTimeout(function() {
var spinner = document.querySelector('.fa-spinner');
spinner.classList.remove('fa-spin');
spinner.classList.remove('fa-spinner');
spinner.classList.add('far', 'fa-check-circle');
spinner.style.color = '#28a745';
}, 5000);
</script>
</div>
It will perform a spinner and then after 5 seconds it will auto load a checkmark.
Now I want to repeat twice more for a total of 3.
Spinner 1 will turn into a check after 1 total second
Spinner 2 will turn into a check after 2 total seconds
Spinner 3 will wait for a hook response then turn green then after 1 second redirect to a dashboard page.
This can be performed with event listeners + a set timeout after the event listener (if your onboardng is made with forms or action buttons).
In your case one checkpoint = one event listener.
Without a full overview of your onboarding setup => I won’t be able to make anything (And I don’t have time to check unfortunately).
But here is an additional code with the right event listener attached to a form. This example might give you some clue to perform what you want (the spinner is replaced by an alert box in this use case).
@matthieu_chateau, I am truly impressed with the brilliant code you’ve provided for the loading spinner. It has significantly enhanced the user experience on my homepage. However, I have a specific requirement that I’d like to discuss.
Currently, the loading spinner is displayed for all visitors, regardless of whether they are logged in. While this works well for authenticated users, I would prefer to disable the spinner for users who arrive via search engines or direct links and are not logged in.
Would you have any suggestions on how to modify the script to achieve this conditional display? I’ve been searching for a custom script that can detect if a user is logged in, but haven’t found a suitable solution yet.
Your expertise and any ideas you may have would be greatly appreciated. Thank you very much for your time and assistance.
Hey @J_1 and @matthieu_chateau
I just wanted to re-implement the alternating loading spinner, but I realized that there is an issue with the timing of the script execution. The JavaScript in the footer is running after the HTML and CSS have been loaded, causing the spinner to display initially without the text and then updating after the script executes.
That means the spinner always first loads a spinner from the code in the header, and then re-loads the spinner from the code in the footer, which doesn’t look very smooth.
I used the header code for the spinner with a customized text to display and left the field for the text blank.
<script>
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
var loadingTexts = [
'Loading, please wait...',
'Welcome to this funny page, we are loading happiness',
'Loading our resources, knowledge needs patience.',
'Hold tight, we are preparing something special for you',
'Get ready for awesomeness, we are loading...',
'Patience is a virtue, we are loading the page...',
];
var randomIndex = Math.floor(Math.random() * loadingTexts.length);
var loadingText = loadingTexts[randomIndex];
document.querySelector('.loading-text').textContent = loadingText;
</script>
Any idea how to make that work with the timing? I tried to ChatGPT my way through it but haven’t managed to adjust the code in a way that works.
Thanks so much in advance if you guys find a minute to look over it.
One solution would be to move the script inside the header.
Or to let it in the footer and use:
<script>
var loadingTexts = [
'Loading, please wait...',
'Welcome to this funny page, we are loading happiness',
'Loading our resources, knowledge needs patience.',
'Hold tight, we are preparing something special for you',
'Get ready for awesomeness, we are loading...',
'Patience is a virtue, we are loading the page...',
];
var randomIndex = Math.floor(Math.random() * loadingTexts.length);
var loadingText = loadingTexts[randomIndex];
document.querySelector('.loading-text').textContent = loadingText;
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
</script>
Here, the loading text is set immediately when the script is encountered in the HTML, before the window load event.
Whereas in the first script, the loading text is set within the load event listener, so it will be set after the entire page has finished loading.
Aah this is great! Thank you so much @matthieu_chateau !
I added it all to the header for now and it seems to wotrk like a charm. Testing it now on different pages to see if there are any issues.