Overview This project demonstrates a simple loading screen animation using HTML and CSS. It consists of a full-page loading screen with animated balls that create a visual loading effect while the page content loads in the background.
Files index.html: This file contains the HTML structure of the loading screen. style.css: This file contains the CSS styles responsible for styling the loading screen elements and creating the animation effects. HTML Structure The HTML file (index.html) contains a minimal structure consisting of:
The #loading-screen div: This div serves as the container for the loading animation. Inside #loading-screen, there is a loading-balls div containing multiple ball elements that represent the animated balls. CSS Styles The CSS file (style.css) defines the styles and animations for the loading screen. Here's a brief overview of the key styles and animations:
Reset default browser styles: Resets default margin, padding, and box-sizing for all elements. Global styles: Sets the background color and font family for the entire document. Loading screen: Styles the loading screen container with fixed position and full viewport width and height. Loading animation container: Styles the container for the loading animation, including text and balls. Loading text: Defines styles for the loading text. Loading balls container: Styles the container for the loading balls. Loading ball: Styles each individual ball with its size, border-radius, background color, and margin. Keyframes for ball animation: Defines the keyframes for the ball animation, including translateY transforms for the bouncing effect. How to Use To use this loading screen animation in your project:
Include the provided HTML and CSS files in your project directory. Link the CSS file (style.css) to your HTML file. Customize the loading screen content and styles as needed. Ensure that the loading animation is displayed while the page content loads in the background. Credits This loading screen animation is created by Ziad or Zierax and can be freely used and customized for personal and commercial projects.