Create AnimatedSpinner.html

[netlify[bot]]

✅ Deploy Preview for frontend-database ready!

Name	Link
🔨 Latest commit	41105878d0c7e0e68dad5885d33a8e8ae8e426ae
🔍 Latest deploy log	https://app.netlify.com/sites/frontend-database/deploys/6521207658099600084e57f1
😎 Deploy Preview	https://deploy-preview-9--frontend-database.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pr-explainer-bot[bot]]

Pull Request Report

Greetings! 👋

Here is the report for the pull request:

Changes:

1. Added AnimatedSpinner.html file.
2. Added CSS styles for the spinner animation.
3. Added HTML structure for the spinner and loading text.

Suggestions to Improve Code:

• Consider using a separate CSS file instead of inline styles for better maintainability (line 5).
• Use CSS classes instead of inline styles for better reusability (lines 14-16).
• Add comments to explain the purpose of each animation keyframe (lines 22-77).
• Use more descriptive class names for better readability (lines 29-43).
• Consider using CSS preprocessors like Sass to improve code organization and maintainability.

Bugs:

• No bugs found.

Improvements:

• Refactor the animation keyframes to use more meaningful names and simplify the rotation values (lines 22-77).

@keyframes rotate {
  0% {
    opacity: 1;
    transform: rotate(225deg);
    animation-timing-function: ease-out;
  }
  7% {
    transform: rotate(345deg);
    animation-timing-function: linear;
  }
  30% {
    transform: rotate(455deg);
    animation-timing-function: ease-in-out;
  }
  39% {
    transform: rotate(690deg);
    opacity: 1;
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(815deg);
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(945deg);
  }
  76% {
    transform: rotate(945deg);
    opacity: 0;
  }
  100% {
    transform: rotate(945deg);
    opacity: 0;
  }
}

Rating:

I would rate the code 8 out of 10 based on the following criteria:

• Readability: The code is well-structured and easy to understand.
• Performance: The animation runs smoothly without any noticeable performance issues.
• Security: No security concerns found in the code.

That's all for the report! Let me know if you need any further assistance. 😄

[dev-AshishRanjan]

@AniketTewari , I Merged this PR,

Please follow the Contribution Guideline present in : https://github.com/dev-AshishRanjan/Hacktoberfest-Frontend/blob/dev/CONTRIBUTING.md

To Do :

1. ADD your project details in contribution/ProjectList.json

After doing this, create a new PR