https://github.com/yashi-singh-1/day-04-loading

Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.
https://github.com/yashi-singh-1/day-04-loading

animation css css-animation css3 front-end front-end-challenge front-end-development frontend frontend-challenge html html5 loading-animations

Last synced: 4 days ago
JSON representation

Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-04-loading
• Owner: Yashi-Singh-1
• Created: 2024-06-15T11:05:12.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-15T11:10:24.000Z (5 months ago)
• Last Synced: 2024-06-15T12:27:58.819Z (5 months ago)
• Topics: animation, css, css-animation, css3, front-end, front-end-challenge, front-end-development, frontend, frontend-challenge, html, html5, loading-animations
• Language: CSS
• Homepage: https://100dayscss.com/days/4/
• Size: 36.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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



  
Clone the repository from GitHub:

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

  
Navigate to the project directory:

  
cd Day-04-Loading

  
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:



  
Fork the repository on GitHub.

  
Create a new branch for your feature or bug fix:

  
git checkout -b your-feature-branch

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

  
git commit -m "Description of your changes"

  
Push your changes to your forked repository:

  
git push origin your-feature-branch

  
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)