Loading animation

[AfreenInnovates]

---

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

This PR introduces a simple, child-friendly loading animation designed specifically for the Sugar Labs educational platform. The animation creates an engaging, age-appropriate experience while the website loads, featuring a large lollipop logo, floating educational icons, and warm orange/yellow colors that appeal to young learners.

The loading animation replaces the previous complex glitch effects with simple, playful animations that won't overwhelm children. It includes educational content, encouraging messages, and a design optimized for tablets and phones (kids' preferred devices).

🔗 Related Issue

Fixes #loading-animation-improvement

🔄 Type of Change

• 📱 New Feature (new page, component, or functionality)
• 🎨 UI/UX Update (visual changes, styling improvements)
• ♿ Accessibility Enhancement

📷 Visual Changes

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: Latest)
• Firefox (Version: Latest)
• Safari (Version: Latest)
• Edge (Version: Latest)
• Mobile Chrome (Device: iPhone 12, Samsung Galaxy)
• Mobile Safari (Device: iPhone 12, iPad)

🖥️ Responsive Design

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

✅ Test Cases

1. Loading Animation Display: Verified animation shows for 3-4 seconds on initial page load
2. Responsive Behavior: Tested on various screen sizes from 320px to 1920px
3. Animation Performance: Confirmed smooth 60fps animations without performance issues
4. Accessibility: Tested with screen readers and keyboard navigation
5. Mobile Touch: Verified touch-friendly design on tablets and phones
6. Color Contrast: Ensured sufficient contrast for readability
7. Motion Preferences: Tested with prefers-reduced-motion enabled

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed
• Color contrast requirements met (WCAG AA compliant)
• Keyboard navigation works correctly
• Screen reader testing performed
• Motion preferences respected (prefers-reduced-motion)
• Large touch targets for mobile users

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• I have added tests that prove my fix/feature works
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

---

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[AfreenInnovates]

@sa-fw-an fixed the errors, and shows checks passed. Let me know if I need to change the colors of the animation, and thanks for reviewing!

[FirePheonix]

I feel like www.sugarlabs.org loads without too much time delay to actually NEED a loading screen, might need it in future, but will implement it with a better design.
For knowing and working on issues that are actually relevant, please join in sugar labs weekly meets from the matrix channel. I see you've been working hard on contributing man, but come and bring out issues to mentors please...