100 Days CSS Challenge - Day 4

This project is a solution for Day 4 of the 100 Days CSS Challenge. The challenge focuses on creating a visually appealing loading animation using CSS.

Table of Contents

• Challenge Overview
• Preview
• Installation
• Usage
• Project Structure
• Styling
• Challenges
• Contributing
• Credits
• Contact

Challenge Overview

The task for Day 4 of the 100 Days CSS Challenge is to create an engaging loading animation. The aim is to develop a smooth and visually appealing effect using CSS animations.

Preview

Here are some previews of the loading animation:

Installation

1. Clone the repository from GitHub:

git clone https://github.com/Yashi-Singh-1/Day-04-Loading.git

2. Navigate to the project directory:

cd Day-04-Loading

3. Open the index.html file in your web browser to view the animation.

Usage

To view and interact with the animation, simply open the index.html file in any web browser. The animation will start automatically.

Project Structure

The project is structured as follows:

• index.html: The main HTML file containing the structure of the animation.
• styles.css: The CSS file containing the styles and animations for the project.
• README.md: This README file containing the project documentation.

Styling

The styling of the project is managed entirely in the styles.css file. The key elements styled include:

• .loader: The container that holds the loading animation elements, centered on the screen with a background color and box shadow.
• .dot: A class applied to each dot in the loading animation, providing the base styles for the animation.
• Animations use the ease-in-out timing function for smooth transitions.

Challenges

During the implementation of this project, the main challenges included:

• Ensuring the animation timings created a visually pleasing and synchronized effect.
• Centering the elements perfectly within the frame for consistency across different screen sizes.
• Optimizing the CSS to be clean and easy to understand while maintaining the desired visual effects.

Contributing

Contributions to this project are welcome. If you have suggestions for improvements, new features, or bug fixes, please follow these steps:

1. Fork the repository on GitHub.
2. Create a new branch for your feature or bug fix:

git checkout -b your-feature-branch

3. Make your changes and commit them with clear and descriptive messages:

git commit -m "Description of your changes"

4. Push your changes to your forked repository:

git push origin your-feature-branch

5. Open a pull request on the original repository, providing a detailed description of your changes.

We appreciate your contributions and will review your pull request as soon as possible. If you encounter any issues or have questions, feel free to open an issue on GitHub.

Credits

This project is part of the 100 Days CSS Challenge. Special thanks to Yashi Singh for the implementation and design of this solution.

Contact

For more projects and updates, connect with Yashi Singh:

• GitHub: github.com/Yashi-Singh-1
• LinkedIn: Yashi Singh (www.linkedin.com/in/yashi-singh-b4143a246)