diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index 11ae34a..7a06d9f 100644
--- a/UI_UPDATE.MD
+++ b/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
 
diff --git a/static/css/utilities.css b/static/css/utilities.css
index c7319ee..04e4d2f 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -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);
+}