Skip to content

Add animations to loading screen #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sumitduster-iMac merged 5 commits into from
Dec 31, 2025
Merged

Add animations to loading screen #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5fb23aa
Initial plan
Copilot Dec 31, 2025
485d629
Enhance loading screen with animations and gradient effects
Copilot Dec 31, 2025
a049b33
Add fallback color and fix CSS property ordering for loading title
Copilot Dec 31, 2025
1682992
Refactor: Update icon and loading screen assets
cursoragent Dec 31, 2025
a5ca1fc
Merge pull request #12 from sumitduster-iMac/cursor/tahoe-icon-liquid…
sumitduster-iMac Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 139 additions & 16 deletions assets/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 3 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
Since all content is loaded from local files and not user-generated, the security risk is minimal. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://lovable.dev https://*.lovable.dev; style-src 'self' 'unsafe-inline' https://lovable.dev https://*.lovable.dev; script-src 'self' 'unsafe-inline' https://lovable.dev https://*.lovable.dev; img-src 'self' https: data:; frame-src https://lovable.dev https://*.lovable.dev; connect-src https://lovable.dev https://*.lovable.dev wss: https:; font-src 'self' https: data:;">
<title>Lovable</title>
<link rel="icon" href="assets/icon.svg" type="image/svg+xml">
<link rel="icon" href="assets/icon.png" type="image/png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
Expand All @@ -15,17 +17,7 @@
<div class="loading-screen" id="loadingScreen">
<div class="loading-content">
<div class="logo-container">
<svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#EC4899;stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="url(#logoGradient)" opacity="0.2"/>
<path d="M50 20 L65 40 L50 35 L35 40 Z" fill="url(#logoGradient)"/>
<path d="M50 35 L65 55 L50 80 L35 55 Z" fill="url(#logoGradient)"/>
</svg>
<img class="logo-icon" src="assets/icon.svg" alt="Lovable icon" />
</div>
<h1 class="loading-title">Lovable</h1>
<div class="loading-spinner">
Expand Down
69 changes: 69 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ body {

.loading-content {
text-align: center;
animation: fadeInUp 0.8s ease-out;
}

.logo-container {
Expand All @@ -52,13 +53,21 @@ body {
.logo-icon {
width: 80px;
height: 80px;
display: block;
animation: pulse 2s ease-in-out infinite;
}

.loading-title {
font-size: 3rem;
font-weight: 700;
color: #E2E8F0;
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;
Copy link

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
margin-bottom: 2rem;
margin-bottom: 2rem;
will-change: background-position;

Copilot uses AI. Check for mistakes.
animation: shimmer 3s linear infinite;
}

Comment on lines +64 to 72
Copy link

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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;
}
}

Copilot uses AI. Check for mistakes.
.loading-spinner {
Expand All @@ -73,20 +82,80 @@ body {
height: 12px;
border-radius: 50%;
background: #3B82F6;
animation: bounce 1.4s ease-in-out infinite;
}

.spinner-dot:nth-child(1) {
animation-delay: 0s;
}

Comment on lines +88 to 91
Copy link

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
.spinner-dot:nth-child(1) {
animation-delay: 0s;
}

Copilot uses AI. Check for mistakes.
.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;
}

Comment on lines +85 to +108
Copy link

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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;
}
}

Copilot uses AI. Check for mistakes.
/* Loading Screen Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}

@keyframes shimmer {
0% {
background-position: 0% center;
}
100% {
background-position: 200% center;
}
}

@keyframes bounce {
0%, 80%, 100% {
transform: scale(1) translateY(0);
opacity: 1;
}
40% {
transform: scale(1.2) translateY(-10px);
opacity: 0.8;
}
}

/* Frame Container */
Expand Down
Loading