Loading animation for Wix Studio Site

Ask the community
, ,
1

Question:
[Clearly ask your question.]
How to Create loading animation for Wix Studio Site?

Product:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor, Editor X.]
Wix Studio Editor

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]
Trying to create entrance animation for Wix Studio Site

What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]
In interactions tab for page there is only scroll animations no entrance animation .

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]
Example for Entrance Animation

2

Hey @Lakshay,

Unfortunately, the video you’ve provided isn’t loading, but I’d recommend that you take a look at this:

3

Here is the Link of the Above Video.

I checked out Preloader Video .

It’s just for 1 section , If someone scrolls while animating The loading screen . The whole site wouldn’t look good .

4

That is unfortunately true. But we have to keep working around using the UI / Code tools that Wix currently offers, since there is no official provision to add an actual custom preloader to your site as of now. It is still a Feature Request as you can see here: Editor X Request: Adding a Pre-Loader to Your Site without Code | Help Center | Wix.com

So another workaround I’d suggest would be to use the Lightbox / Popup as a loading screen as that will stay pinned on top of the page.

Here’s a video that shows how it is done:

1 Like
5

I think there are even two ways to get this functionality of having a STICKY-PRELOADER on your webpage.

The first one already mentioned → LIGHTBOX and the second one would be to create your preloader inside the header (but positioning the preloader-elements) more to the center (out of the header itself).

Both ways should work, because in both ways you would have your preloader on a separate LAYER-LEVEL.

And maybe there is even a third way of how to get it.

6

Created the Lightbox Preloader .

Here’s the Link

2 Likes
7

Well done, but i think there are different levels of preloader-setups.

8

Good job! :+1:t2:

Just make sure to stretch the lightbox to full width and height, and also remember to remove the X icon and add the code that closes the lightbox.

9

Do not stop on this!
What you have generate, looks maybe nice, but this is not a REAL preloader.
So keep going… improve it…

Learn more about PRELOADERS.

Just some info from my new GPT-friend…

Preloaders, also known as loading indicators or spinners, are graphical elements used in user interfaces to indicate that content is being loaded or processed. They serve a crucial role in improving user experience by providing feedback that something is happening in the background. Here are some key points to know about preloaders:

  1. Visual Feedback:
  • Preloaders provide users with visual feedback that the application is working on a task, such as loading data, processing a request, or initializing components.
  1. Reducing Perceived Wait Time:
  • The presence of a preloader can help reduce the perceived wait time for users. Instead of staring at a blank screen, users see an animated indicator, which gives the impression that progress is being made.
  1. User Engagement:
  • Preloaders can engage users during wait times, making them feel more patient and less likely to abandon the application due to perceived slowness.
  1. Professional Aesthetics:
  • Including a preloader in your application provides a more polished and professional appearance. It shows that the application is well-designed and cares about the user experience.
  1. Customization:
  • Preloaders can be customized to match the visual theme of the application. This includes changing colors, shapes, and animations to align with the overall design.
  1. Implementation:
  • Preloaders can be implemented using HTML, CSS, and JavaScript. CSS is often used for styling and animations, and JavaScript may be used for controlling the display logic.
  1. Responsive Design:
  • Preloaders should be designed to be responsive, adapting to different screen sizes and orientations. This ensures a consistent user experience across various devices.
  1. Accessibility:
  • Consider accessibility when implementing preloaders. Provide alternative text for screen readers and ensure that users with disabilities have an equivalent experience.
  1. Libraries and Frameworks:
  • There are various libraries and frameworks that offer pre-built preloader components. For example, libraries like Spin.js and loaders.css provide easy-to-use preloader styles.
  1. Integration with Asynchronous Operations:
  • Preloaders are commonly used in conjunction with asynchronous operations such as AJAX requests or fetching data from APIs. They help manage user expectations during these potentially time-consuming tasks.

In summary, preloaders play a vital role in enhancing the user experience by providing visual feedback and reducing perceived wait times during various asynchronous operations in web and mobile applications.

Maybe you want to improve your preloader, who knows!

I think this one could be useful…