Complete 2.4.3: Animated Icons - Add loading spinners, progress indicators, micro-interactions, and hover animations

UI_UPDATE.MD

@@ -241,9 +241,9 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 - [x] Implement responsive icon scaling
 
 #### 2.4.3: Animated Icons
-- [ ] Create loading spinners and progress indicators
+- [x] Create loading spinners and progress indicators
-- [ ] Implement micro-interaction animations
+- [x] Implement micro-interaction animations
-- [ ] Add hover state animations for interactive icons
+- [x] Add hover state animations for interactive icons
 
 #### 2.4.4: Accessibility Implementation
 - [ ] Add screen reader labels for decorative icons

static/css/icons.css

@@ -1,4 +1,37 @@
-/* SVG Icon System */
+/* =================================================================
+   ANIMATIONS
+   ================================================================= */
+
+/* Keyframe definitions */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.8; transform: scale(1.05); }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-4px); }
+    60% { transform: translateY(-2px); }
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes progress-fill {
+    0% { width: 0%; }
+    100% { width: var(--progress-fill-percent, 100%); }
+}
+
+/* =================================================================
+   SVG Icon System
+   ================================================================= */
 
 .icon {
     display: inline-flex;
@@ -6,12 +39,15 @@
     justify-content: center;
     width: 1em;
     height: 1em;
+    /* Smooth transitions for hover effects */
+    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
 }
 
 .icon svg {
     width: 100%;
     height: 100%;
     fill: currentColor;
+    transition: inherit;
 }
 
 /* Icon Definitions */
@@ -171,5 +207,130 @@
     height: var(--current-icon-size);
 }
 
+/* =================================================================
+   ANIMATED ICONS
+   ================================================================= */
+
+/* Loading States and Spinners */
+.icon-loading,
+.icon-refresh.icon-loading {
+    animation: spin 1s linear infinite;
+}
+
+.icon-spinner {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    animation: spin 1s linear infinite;
+}
+
+.icon-spinner::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    border: 2px solid var(--color-primary-light);
+    border-top: 2px solid var(--color-primary);
+    border-radius: 50%;
+}
+
+/* Micro-interaction Animations */
+.icon-pulse {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* Applied when element is being updated or refreshed */
+.icon-bounce {
+    animation: bounce 1s ease-in-out infinite;
+}
+
+/* Smooth fade in for new icons */
+.icon-fade-in {
+    animation: fadeIn 0.3s ease-in;
+}
+
+/* =================================================================
+   PROGRESS INDICATORS
+   ================================================================= */
+
+.progress-indicator {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background-color: var(--color-surface-variant);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.progress-indicator::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background-color: var(--color-primary);
+    border-radius: 2px;
+    animation: progress-fill 2s ease-out;
+}
+
+/* Customizable progress with CSS variable */
+.progress-indicator-custom {
+    --progress-fill-percent: 75%;
+}
+
+.progress-indicator-custom::after {
+    animation: progress-fill var(--progress-duration, 1s) ease-out;
+}
+
+/* =================================================================
+   HOVER STATE ANIMATIONS
+   ================================================================= */
+
+/* Base hover effects for interactive icons */
+.icon:hover,
+.icon-interactive:hover {
+    transform: scale(1.1);
+}
+
+/* Specific hover effects for different icon types */
+.icon-refresh:hover {
+    color: var(--color-accent);
+    animation: spin 0.5s ease-in;
+}
+
+.icon-chat:hover {
+    transform: scale(1.1) translateY(-1px);
+    color: var(--color-accent);
+}
+
+.icon-baseball:hover {
+    animation: bounce 0.6s ease-in-out;
+}
+
+.icon-users:hover {
+    transform: scale(1.05) translateY(-1px);
+    color: var(--color-secondary);
+}
+
+.icon-wave:hover {
+    transform: translateX(2px);
+    color: var(--color-accent);
+}
+
+/* Interactive button icons - more pronounced effects */
+.icon-button:hover {
+    transform: scale(1.15);
+    filter: brightness(1.2);
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Icon sets with coordinated hover effects */
+.icon-group .icon:hover {
+    z-index: 1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
 /* Override defaults for specific icon types if needed */
 /* Add icon-specific overrides here as needed */