[Feature] Add a Pre-Loader to the Website

[Nandini-13]

Description

A pre-loader is a visual element or animation that appears on a website or application while its content or resources (such as images, stylesheets, scripts, or videos) are being loaded. Adding it will improve user experience by indicating that the page is in the process of loading, so users don't face a blank screen or unresponsive content.

Motivation

Why Use a Pre-loader? Improves User Experience: Without a pre-loader, users might think the site is broken or slow, especially if the content takes a few seconds to load. Visual Feedback: It assures the user that something is happening in the background and the content will soon be displayed. Branding: A pre-loader can incorporate branding elements like logos, colors, or custom animations to maintain user engagement.

Screenshots

No response

Additional Context

No response

Checklist

• [X] I have checked the existing issues.
• [X] I have read the Code Of Conduct.
• [X] The changes don't break the code.
• [X] I will attach screenshots and videos of the development work once it is done.

Priority

Low

[Karna0005]

if you can add hactoberfest label for this issue i would love to contribute

[Nandini-13]

@Karna0005 I am a contributor myself waiting for this issue to be assigned to me

[Riddhi12349]

Hi please assign me this issue , needed for gssoc extd.