Add animations to loading screen #11
Conversation
Co-authored-by: sumitduster-iMac <[email protected]>
Co-authored-by: sumitduster-iMac <[email protected]>
Replace inline SVG with image tag for icon. Update SVG for better visual appeal. Co-authored-by: sumitduster <[email protected]>
…-glass-e8d2 Tahoe icon liquid glass
There was a problem hiding this comment.
Pull request overview
This PR enhances the loading screen with CSS animations to create a more engaging user experience. The changes include adding animation effects to the logo, title, loading dots, and content wrapper, along with replacing the inline SVG logo with an external SVG file featuring a new "Tahoe" liquid glass heart design.
Key changes:
- Added 5 CSS keyframe animations (fadeInUp, fadeIn, pulse, shimmer, bounce) with hardware-accelerated transforms
- Replaced inline SVG logo with external SVG image file featuring a new multicolor gradient heart design
- Added favicon support with both SVG and PNG formats for broad browser compatibility
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| styles.css | Added CSS animations (pulse, shimmer, bounce, fadeIn, fadeInUp) with animation declarations applied to loading screen elements |
| index.html | Replaced inline SVG logo with <img> tag referencing external SVG file; added favicon links for SVG and PNG formats |
| assets/icon.svg | New elaborate heart-shaped icon with Tahoe-style multicolor gradients, liquid glass effects, shadows, and accessibility attributes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .spinner-dot:nth-child(1) { | ||
| animation-delay: 0s; | ||
| } | ||
|
|
There was a problem hiding this comment.
The animation-delay: 0s; declaration is redundant as 0s is the default value for animation-delay. This line can be removed to improve code clarity and reduce unnecessary CSS.
| .spinner-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } |
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| margin-bottom: 2rem; |
There was a problem hiding this comment.
The shimmer animation animates background-position, which can cause repaints. Consider adding will-change: background-position; to .loading-title to hint to the browser to optimize this animation, or explore using transform: translateX() on a pseudo-element for better performance.
| margin-bottom: 2rem; | |
| margin-bottom: 2rem; | |
| will-change: background-position; |
| animation: bounce 1.4s ease-in-out infinite; | ||
| } | ||
|
|
||
| .spinner-dot:nth-child(1) { | ||
| animation-delay: 0s; | ||
| } | ||
|
|
||
| .spinner-dot:nth-child(2) { | ||
| background: #60A5FA; | ||
| animation-delay: 0.2s; | ||
| } | ||
|
|
||
| .spinner-dot:nth-child(3) { | ||
| background: #EC4899; | ||
| animation-delay: 0.4s; | ||
| } | ||
|
|
||
| .loading-text { | ||
| color: #94A3B8; | ||
| font-size: 0.95rem; | ||
| font-weight: 400; | ||
| animation: fadeIn 1s ease-in; | ||
| } | ||
|
|
There was a problem hiding this comment.
The animations do not respect the prefers-reduced-motion media query. Users with vestibular disorders or motion sensitivity may experience discomfort from these animations. Consider wrapping the animation declarations in a media query: @media (prefers-reduced-motion: no-preference) to apply animations only when users haven't requested reduced motion.
| animation: bounce 1.4s ease-in-out infinite; | |
| } | |
| .spinner-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .spinner-dot:nth-child(2) { | |
| background: #60A5FA; | |
| animation-delay: 0.2s; | |
| } | |
| .spinner-dot:nth-child(3) { | |
| background: #EC4899; | |
| animation-delay: 0.4s; | |
| } | |
| .loading-text { | |
| color: #94A3B8; | |
| font-size: 0.95rem; | |
| font-weight: 400; | |
| animation: fadeIn 1s ease-in; | |
| } | |
| } | |
| .spinner-dot:nth-child(2) { | |
| background: #60A5FA; | |
| } | |
| .spinner-dot:nth-child(3) { | |
| background: #EC4899; | |
| } | |
| .loading-text { | |
| color: #94A3B8; | |
| font-size: 0.95rem; | |
| font-weight: 400; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .spinner-dot { | |
| animation: bounce 1.4s ease-in-out infinite; | |
| } | |
| .spinner-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .spinner-dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .spinner-dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .loading-text { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| } |
| background: linear-gradient(90deg, #3B82F6 0%, #EC4899 50%, #3B82F6 100%); | ||
| background-size: 200% auto; | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| margin-bottom: 2rem; | ||
| animation: shimmer 3s linear infinite; | ||
| } | ||
|
|
There was a problem hiding this comment.
The fallback color #E2E8F0 on line 63 will not be visible when -webkit-text-fill-color: transparent is applied (line 68), even in browsers that don't support background-clip: text. For a proper fallback, either use a @supports query to conditionally apply the gradient styling, or ensure the transparent text fill is only applied when background-clip is supported.
| background: linear-gradient(90deg, #3B82F6 0%, #EC4899 50%, #3B82F6 100%); | |
| background-size: 200% auto; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 2rem; | |
| animation: shimmer 3s linear infinite; | |
| } | |
| margin-bottom: 2rem; | |
| animation: shimmer 3s linear infinite; | |
| } | |
| @supports ((-webkit-background-clip: text) or (background-clip: text)) { | |
| .loading-title { | |
| background: linear-gradient(90deg, #3B82F6 0%, #EC4899 50%, #3B82F6 100%); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| } |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| C309 479 283 492 256 504 | ||
| C229 492 203 479 256 468 Z" | ||
| fill="transparent"/> | ||
| </g> |
There was a problem hiding this comment.
SVG inner shade filter has no effect
The innerShade filter is applied to a path with fill="transparent", but the filter uses SourceAlpha to create its effect. Since a transparent fill has zero alpha, SourceAlpha is empty and the filter produces no visible output. The intended "inner shade for glass depth" effect won't render at all. The path needs a solid fill for the inner shadow filter to function correctly.
Enhanced the loading screen with CSS animations for a more engaging user experience during app initialization.
Changes
All animations use hardware-accelerated CSS transforms with appropriate easing curves. Added fallback color for browsers without gradient text support.
Screenshot
Implementation
Added 5 CSS keyframe animations to
styles.css:No HTML or JavaScript changes required.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
Note
Enhances the loading experience and branding with a new icon and motion.
assets/icon.svg(Tahoe heart) with gradients, shadows, and accessibility attributes (role="img",aria-label)index.htmlto use the new icon: adds favicon links and replaces the inline SVG logo with<img src="assets/icon.svg">styles.css:fadeInUp,fadeIn,pulse,shimmer,bounce; applies pulsing logo, shimmering gradient title, and staggered bouncing dotsWritten by Cursor Bugbot for commit a5ca1fc. Configure here.