Complete 4.1.3: Loading Animations - Implement various loading spinners, progress indicators, and skeleton states for enhanced user experience
This commit is contained in:
Vincent
parent
d67d152b77
commit
f3776b86b0
2 changed files with 639 additions and 4 deletions
14
UI_UPDATE.MD
14
UI_UPDATE.MD
|
|
@ -447,10 +447,16 @@ All utilities follow the established pattern of using CSS custom properties from
|
|||
|
||||
**Notes:** Comprehensive component animation system implemented including smooth state transitions (hover, focus, active states), enter/exit animations for dynamic content (message slide-ins, system message fades), and micro-interaction feedback (button scales, form lifts, mobile navigation feedback). Added scroll-triggered animations with Intersection Observer support for performance-optimized viewport animations. Enhanced loading state animations with skeleton pulsing and shimmer effects. All animations use CSS custom properties from utilities.css for consistent timing and performance.
|
||||
|
||||
#### 4.1.3: Loading Animations
|
||||
- [ ] Implement spinner and progress indicators
|
||||
- [ ] Add skeleton loading states
|
||||
- [ ] Create engaging loading experiences
|
||||
#### 4.1.3: Loading Animations - COMPLETED 9/29/2025
|
||||
- [x] Implement spinner and progress indicators
|
||||
- [x] Add skeleton loading states
|
||||
- [x] Create engaging loading experiences
|
||||
|
||||
**Notes:** Comprehensive loading animation system implemented in utilities.css with:
|
||||
- **Spinners & Progress Indicators**: Border spinners (.spinner-border), grow spinners (.spinner-grow), loading dots (.loading-dots), loading bars (.loading-bars), spinning dots (.spinning-dots), progress bars (.progress-bar with .progress-bar-striped variants and indeterminate animations), and circular progress indicators (.progress-circular)
|
||||
- **Skeleton Loading States**: Base skeleton (.skeleton), skeleton lines (.skeleton-line), circles (.skeleton-circle), rectangles (.skeleton-rectangle), shimmer effect (.skeleton-shimmer), skeleton cards (.skeleton-card), and skeleton lists (.skeleton-list). Includes light/dark variants (.skeleton-light, .skeleton-dark)
|
||||
- **Engaging Loading Experiences**: Orbital spinners (.loading-orbit), animated hourglass (.hourglass), digital counter (.loading-counter), matrix-style rain (.loading-matrix), and cosmic orbiting particles (.loading-cosmic)
|
||||
- **Technical Features**: All animations use Dodgers-themed color scheme (--dodgers-blue, --dodgers-red, --dodgers-yellow), 60fps performance with transform/opacity animations, responsive design, and accessibility considerations. Uses keyframe animations for smooth performance and CSS custom properties for consistency.
|
||||
|
||||
### Sub-task 4.2: Interactive States and Feedback
|
||||
|
||||
|
|
|
|||
|
|
@ -1279,3 +1279,632 @@
|
|||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
LOADING ANIMATIONS - Phase 4.1.3 Implementation
|
||||
================================================================= */
|
||||
|
||||
/* ===== LOADING SPINNERS ===== */
|
||||
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spinner-grow {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-dots {
|
||||
0%, 20% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes loading-bars {
|
||||
0% { transform: scaleY(0.4); }
|
||||
20% { transform: scaleY(1); }
|
||||
40% { transform: scaleY(0.4); }
|
||||
100% { transform: scaleY(0.4); }
|
||||
}
|
||||
|
||||
@keyframes spinning-dots {
|
||||
0% { transform: rotate(0deg) scale(1); }
|
||||
25% { transform: rotate(90deg) scale(0.8); }
|
||||
50% { transform: rotate(180deg) scale(1.2); }
|
||||
75% { transform: rotate(270deg) scale(0.8); }
|
||||
100% { transform: rotate(360deg) scale(1); }
|
||||
}
|
||||
|
||||
/* Spinner variants */
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 0.25rem solid var(--dodgers-gray-200);
|
||||
border-right-color: var(--dodgers-blue);
|
||||
border-radius: 50%;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.2rem;
|
||||
}
|
||||
|
||||
.spinner-grow {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--dodgers-blue);
|
||||
border-radius: 50%;
|
||||
animation: spinner-grow 0.75s linear infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-dots > span {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--dodgers-blue);
|
||||
animation: loading-dots 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.loading-dots > span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.loading-dots > span:nth-child(2) { animation-delay: -0.16s; }
|
||||
.loading-dots > span:nth-child(3) { animation-delay: 0s; }
|
||||
|
||||
.loading-bars {
|
||||
display: inline-flex;
|
||||
gap: 0.125rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.loading-bars > span {
|
||||
width: 0.25rem;
|
||||
height: 1rem;
|
||||
background-color: var(--dodgers-blue);
|
||||
animation: loading-bars 1.2s ease-in-out infinite both;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.loading-bars > span:nth-child(1) { animation-delay: -1.1s; }
|
||||
.loading-bars > span:nth-child(2) { animation-delay: -1.0s; }
|
||||
.loading-bars > span:nth-child(3) { animation-delay: -0.9s; }
|
||||
.loading-bars > span:nth-child(4) { animation-delay: -0.8s; }
|
||||
.loading-bars > span:nth-child(5) { animation-delay: -0.7s; }
|
||||
|
||||
.spinning-dots {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spinning-dots > span {
|
||||
position: absolute;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--dodgers-blue);
|
||||
}
|
||||
|
||||
.spinning-dots > span:nth-child(1) {
|
||||
top: 0.5rem;
|
||||
left: 1.25rem;
|
||||
}
|
||||
|
||||
.spinning-dots > span:nth-child(2) {
|
||||
top: 0.75rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.spinning-dots > span:nth-child(3) {
|
||||
top: 1.25rem;
|
||||
left: 0.75rem;
|
||||
}
|
||||
|
||||
.spinning-dots > span:nth-child(4) {
|
||||
top: 1.5rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
@keyframes spinning-dots {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
background-color: var(--dodgers-blue);
|
||||
}
|
||||
20% {
|
||||
background-color: var(--dodgers-red);
|
||||
}
|
||||
30% {
|
||||
background-color: var(--dodgers-yellow);
|
||||
}
|
||||
40% {
|
||||
background-color: var(--dodgers-blue);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinning-dots > span:nth-child(1) { animation: spinning-dots 2s infinite linear; }
|
||||
.spinning-dots > span:nth-child(2) { animation: spinning-dots 2s infinite linear 0.1s; }
|
||||
.spinning-dots > span:nth-child(3) { animation: spinning-dots 2s infinite linear 0.2s; }
|
||||
.spinning-dots > span:nth-child(4) { animation: spinning-dots 2s infinite linear 0.3s; }
|
||||
|
||||
/* ===== PROGRESS INDICATORS ===== */
|
||||
|
||||
@keyframes progress-bar {
|
||||
from { width: 0%; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes progress-bar-stripes {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(1rem); }
|
||||
}
|
||||
|
||||
@keyframes indeterminate {
|
||||
0% { transform: translateX(-100%) scaleX(1); }
|
||||
49.999% { transform: translateX(0%) scaleX(1); }
|
||||
50% { transform: translateX(0%) scaleX(1); }
|
||||
100% { transform: translateX(100%) scaleX(1); }
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
height: 0.5rem;
|
||||
background-color: var(--dodgers-gray-200);
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar > .progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--dodgers-blue) 0%, var(--dodgers-red) 100%);
|
||||
border-radius: inherit;
|
||||
transition: width 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.progress-bar-striped > .progress-fill {
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.15) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.15) 50%,
|
||||
rgba(255, 255, 255, 0.15) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 1rem 1rem;
|
||||
animation: progress-bar-stripes 1s linear infinite;
|
||||
}
|
||||
|
||||
.progress-bar-indeterminate > .progress-fill {
|
||||
width: 30% !important;
|
||||
animation: indeterminate 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.progress-circular {
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.progress-circular > svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-circular > svg circle {
|
||||
cx: 1.5rem;
|
||||
cy: 1.5rem;
|
||||
r: 1.25rem;
|
||||
fill: none;
|
||||
stroke: var(--dodgers-gray-200);
|
||||
stroke-width: 0.25rem;
|
||||
}
|
||||
|
||||
.progress-circular > svg circle.progress-fill {
|
||||
stroke: var(--dodgers-blue);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dasharray 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===== SKELETON LOADING STATES ===== */
|
||||
|
||||
@keyframes skeleton-pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background-color: var(--dodgers-gray-100);
|
||||
border-radius: 0.25rem;
|
||||
animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.skeleton-circle {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-rectangle {
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-shimmer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--dodgers-gray-100);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.skeleton-shimmer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: skeleton-shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
.skeleton-light {
|
||||
background-color: var(--dodgers-gray-50);
|
||||
}
|
||||
|
||||
.skeleton-dark {
|
||||
background-color: var(--dodgers-gray-200);
|
||||
}
|
||||
|
||||
/* Skeleton card layout */
|
||||
.skeleton-card {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--dodgers-gray-200);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-card-header .skeleton-circle {
|
||||
margin-right: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-card-header .skeleton-line {
|
||||
flex: 1;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.skeleton-card-content .skeleton-line {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-card-content .skeleton-line:nth-child(2) { width: 90%; }
|
||||
.skeleton-card-content .skeleton-line:nth-child(3) { width: 75%; }
|
||||
|
||||
/* Skeleton list layout */
|
||||
.skeleton-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.skeleton-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.skeleton-list-item .skeleton-circle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-list-item .skeleton-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-list-item .skeleton-content .skeleton-line {
|
||||
height: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.skeleton-list-item .skeleton-content .skeleton-line:nth-child(2) { width: 70%; }
|
||||
|
||||
/* ===== ENGAGING LOADING EXPERIENCES ===== */
|
||||
|
||||
@keyframes loading-bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-0.5rem); }
|
||||
60% { transform: translateY(-0.25rem); }
|
||||
}
|
||||
|
||||
@keyframes loading-elastic {
|
||||
0% { transform: scale(0.3); }
|
||||
40% { transform: scale(1); }
|
||||
80% { transform: scale(0.9); }
|
||||
100% { transform: scale(0.9); }
|
||||
}
|
||||
|
||||
@keyframes loading-wave {
|
||||
0% { transform: rotate(0deg); }
|
||||
10% { transform: rotate(14deg); }
|
||||
20% { transform: rotate(-8deg); }
|
||||
30% { transform: rotate(14deg); }
|
||||
40% { transform: rotate(-4deg); }
|
||||
50% { transform: rotate(10deg); }
|
||||
60% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes loading-heartbeat {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes loading-orbit {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-bounce {
|
||||
animation: loading-bounce 2s infinite;
|
||||
}
|
||||
|
||||
.loading-elastic {
|
||||
animation: loading-elastic 2s infinite;
|
||||
}
|
||||
|
||||
.loading-wave {
|
||||
animation: loading-wave 2.5s infinite;
|
||||
}
|
||||
|
||||
.loading-heartbeat {
|
||||
animation: loading-heartbeat 1s infinite;
|
||||
}
|
||||
|
||||
/* Orbit spinning loader */
|
||||
.loading-orbit {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.loading-orbit > span {
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--dodgers-blue);
|
||||
}
|
||||
|
||||
.loading-orbit > span:nth-child(1) { top: 0; left: 50%; margin-left: -0.25rem; }
|
||||
.loading-orbit > span:nth-child(2) { top: 12.5%; right: 12.5%; }
|
||||
.loading-orbit > span:nth-child(3) { bottom: 12.5%; right: 12.5%; }
|
||||
.loading-orbit > span:nth-child(4) { bottom: 0; left: 50%; margin-left: -0.25rem; }
|
||||
.loading-orbit > span:nth-child(5) { bottom: 12.5%; left: 12.5%; }
|
||||
.loading-orbit > span:nth-child(6) { top: 12.5%; left: 12.5%; }
|
||||
|
||||
.loading-orbit > span:nth-child(1) { animation: loading-orbit 2s linear infinite; animation-delay: -1.9s; }
|
||||
.loading-orbit > span:nth-child(2) { animation: loading-orbit 2s linear infinite; animation-delay: -1.6s; }
|
||||
.loading-orbit > span:nth-child(3) { animation: loading-orbit 2s linear infinite; animation-delay: -1.3s; }
|
||||
.loading-orbit > span:nth-child(4) { animation: loading-orbit 2s linear infinite; animation-delay: -1.0s; }
|
||||
.loading-orbit > span:nth-child(5) { animation: loading-orbit 2s linear infinite; animation-delay: -0.7s; }
|
||||
.loading-orbit > span:nth-child(6) { animation: loading-orbit 2s linear infinite; animation-delay: -0.4s; }
|
||||
|
||||
/* Hourglass loader */
|
||||
@keyframes hourglass {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
border-radius: 0;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
border-radius: 50% 0 50% 50%;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hourglass {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 25%,
|
||||
var(--dodgers-blue) 25%,
|
||||
var(--dodgers-blue) 75%,
|
||||
transparent 75%
|
||||
);
|
||||
border-radius: 0 0 50% 50%;
|
||||
animation: hourglass 2s infinite;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.hourglass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0.25rem;
|
||||
height: 0.5rem;
|
||||
background: var(--dodgers-blue);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Digital loading counter */
|
||||
.loading-counter {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--dodgers-blue);
|
||||
animation: loading-counter 2s linear infinite;
|
||||
text-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
|
||||
}
|
||||
|
||||
@keyframes loading-counter {
|
||||
0% { content: "0"; }
|
||||
10% { content: "1"; }
|
||||
20% { content: "2"; }
|
||||
30% { content: "3"; }
|
||||
40% { content: "4"; }
|
||||
50% { content: "5"; }
|
||||
60% { content: "6"; }
|
||||
70% { content: "7"; }
|
||||
80% { content: "8"; }
|
||||
90% { content: "9"; }
|
||||
100% { content: "0"; }
|
||||
}
|
||||
|
||||
/* Matrix-style loading */
|
||||
@keyframes matrix-rain {
|
||||
0% { opacity: 0; transform: translateY(-2rem); }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { opacity: 0; transform: translateY(2rem); }
|
||||
}
|
||||
|
||||
.loading-matrix {
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 1.5rem;
|
||||
color: var(--dodgers-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-matrix::before {
|
||||
content: '01';
|
||||
position: absolute;
|
||||
animation: matrix-rain 2s infinite;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.loading-matrix::after {
|
||||
content: '10';
|
||||
position: absolute;
|
||||
animation: matrix-rain 2s infinite;
|
||||
}
|
||||
|
||||
/* Cosmic loading effect */
|
||||
@keyframes cosmic-orbit {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg) scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-cosmic {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.loading-cosmic > span {
|
||||
position: absolute;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, var(--dodgers-blue), var(--dodgers-red));
|
||||
box-shadow: 0 0 10px rgba(30, 144, 255, 0.6);
|
||||
}
|
||||
|
||||
.loading-cosmic > span:nth-child(1) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -0.375rem;
|
||||
animation: cosmic-orbit 3s infinite linear;
|
||||
}
|
||||
|
||||
.loading-cosmic > span:nth-child(2) {
|
||||
top: 25%;
|
||||
right: 0;
|
||||
margin-top: -0.375rem;
|
||||
animation: cosmic-orbit 3s infinite linear;
|
||||
animation-delay: -1s;
|
||||
background: linear-gradient(45deg, var(--dodgers-red), var(--dodgers-yellow));
|
||||
box-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
|
||||
}
|
||||
|
||||
.loading-cosmic > span:nth-child(3) {
|
||||
bottom: 25%;
|
||||
right: 0;
|
||||
margin-bottom: -0.375rem;
|
||||
animation: cosmic-orbit 3s infinite linear;
|
||||
animation-delay: -2s;
|
||||
background: linear-gradient(45deg, var(--dodgers-yellow), var(--dodgers-blue));
|
||||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue