� Complete Create Project Form with Beautiful UI & Loading Components
✨ Major Features Added:
- Complete Create New Project form with full validation
- Beautiful LoadingButton component with animations
- Enhanced loading components with multiple styles
- Professional form styling with dark mode support
� Create Project Form Features:
- Project Information: Name, Client, Description (required)
- Project Settings: Category, Priority, Status with color badges
- Timeline & Budget: Date pickers with validation, Budget input
- Team Assignment: Multi-select for managers and team members
- Form validation with real-time error display
- Responsive design for all screen sizes
� Loading Components:
- LoadingButton: Customizable button with loading states
- EnhancedLoader: Multiple loading animation styles
- Smooth transitions and professional animations
- Size variants: small, medium, large
- Color variants: primary, secondary, success, etc.
� UI/UX Improvements:
- UserAvatar component with initials fallback
- Gradient backgrounds for avatars (#ff9f43 to #e8890a)
- Professional form sections with icons
- Consistent 42px height for all form controls
- Beautiful hover effects and transitions
- Optimized button sizes (40px height)
� Dark Mode Support:
- Complete dark theme for all new components
- Form backgrounds: #1d1d42
- Proper contrast ratios for accessibility
- Smooth theme transitions
� Technical Features:
- Route /create-project added to router
- Form state management with React hooks
- Date validation (end date after start date)
- Multi-select with avatar display
- Error handling and user feedback
- Clean component architecture
� Ready for Production:
- All ESLint warnings fixed
- Responsive design tested
- Loading states implemented
- Form validation complete
- Dark mode fully supported
This commit is contained in:
tuan.cna
@@ -0,0 +1,133 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './EnhancedLoader.scss';
|
||||
|
||||
const EnhancedLoader = ({
|
||||
type = 'modern',
|
||||
size = 'medium',
|
||||
color = 'primary',
|
||||
text = 'Loading...',
|
||||
showText = true,
|
||||
overlay = true,
|
||||
progress = null
|
||||
}) => {
|
||||
const [dots, setDots] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setDots(prev => prev.length >= 3 ? '' : prev + '.');
|
||||
}, 500);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const renderLoader = () => {
|
||||
switch (type) {
|
||||
case 'modern':
|
||||
return (
|
||||
<div className={`modern-loader ${size} ${color}`}>
|
||||
<div className="loader-ring">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'pulse':
|
||||
return (
|
||||
<div className={`pulse-loader ${size} ${color}`}>
|
||||
<div className="pulse-dot"></div>
|
||||
<div className="pulse-dot"></div>
|
||||
<div className="pulse-dot"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'wave':
|
||||
return (
|
||||
<div className={`wave-loader ${size} ${color}`}>
|
||||
<div className="wave-bar"></div>
|
||||
<div className="wave-bar"></div>
|
||||
<div className="wave-bar"></div>
|
||||
<div className="wave-bar"></div>
|
||||
<div className="wave-bar"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'spinner':
|
||||
return (
|
||||
<div className={`spinner-loader ${size} ${color}`}>
|
||||
<div className="spinner-circle">
|
||||
<div className="spinner-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'dots':
|
||||
return (
|
||||
<div className={`dots-loader ${size} ${color}`}>
|
||||
<div className="dot"></div>
|
||||
<div className="dot"></div>
|
||||
<div className="dot"></div>
|
||||
<div className="dot"></div>
|
||||
<div className="dot"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'gradient':
|
||||
return (
|
||||
<div className={`gradient-loader ${size} ${color}`}>
|
||||
<div className="gradient-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'bounce':
|
||||
return (
|
||||
<div className={`bounce-loader ${size} ${color}`}>
|
||||
<div className="bounce-ball"></div>
|
||||
<div className="bounce-ball"></div>
|
||||
<div className="bounce-ball"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className={`modern-loader ${size} ${color}`}>
|
||||
<div className="loader-ring">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`enhanced-loader-container ${overlay ? 'with-overlay' : ''}`}>
|
||||
<div className="enhanced-loader-content">
|
||||
{renderLoader()}
|
||||
|
||||
{showText && (
|
||||
<div className="loader-text">
|
||||
<span className="loading-message">{text}{dots}</span>
|
||||
{progress !== null && (
|
||||
<div className="progress-container">
|
||||
<div className="progress-bar">
|
||||
<div
|
||||
className="progress-fill"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="progress-text">{progress}%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnhancedLoader;
|
||||
@@ -0,0 +1,362 @@
|
||||
// Enhanced Loader Styles
|
||||
.enhanced-loader-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
|
||||
&.with-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 999999;
|
||||
|
||||
[data-layout-mode="dark_mode"] & {
|
||||
background: rgba(29, 29, 66, 0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enhanced-loader-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
// Size variants
|
||||
.small {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.medium {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.large {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
// Color variants
|
||||
.primary {
|
||||
--loader-color: #ff9f43;
|
||||
--loader-secondary: rgba(255, 159, 67, 0.3);
|
||||
}
|
||||
|
||||
.success {
|
||||
--loader-color: #28a745;
|
||||
--loader-secondary: rgba(40, 167, 69, 0.3);
|
||||
}
|
||||
|
||||
.danger {
|
||||
--loader-color: #dc3545;
|
||||
--loader-secondary: rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
|
||||
.info {
|
||||
--loader-color: #17a2b8;
|
||||
--loader-secondary: rgba(23, 162, 184, 0.3);
|
||||
}
|
||||
|
||||
// Modern Ring Loader
|
||||
.modern-loader {
|
||||
.loader-ring {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 8px;
|
||||
border: 8px solid var(--loader-color);
|
||||
border-radius: 50%;
|
||||
animation: modern-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: var(--loader-color) transparent transparent transparent;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.45s; }
|
||||
&:nth-child(2) { animation-delay: -0.3s; }
|
||||
&:nth-child(3) { animation-delay: -0.15s; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modern-ring {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Pulse Loader
|
||||
.pulse-loader {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.pulse-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--loader-color);
|
||||
animation: pulse-scale 1.4s ease-in-out infinite both;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.32s; }
|
||||
&:nth-child(2) { animation-delay: -0.16s; }
|
||||
&:nth-child(3) { animation-delay: 0s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-scale {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Wave Loader
|
||||
.wave-loader {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: end;
|
||||
|
||||
.wave-bar {
|
||||
width: 8px;
|
||||
height: 40px;
|
||||
background: var(--loader-color);
|
||||
border-radius: 4px;
|
||||
animation: wave-bounce 1.2s ease-in-out infinite;
|
||||
|
||||
&:nth-child(1) { animation-delay: -1.1s; }
|
||||
&:nth-child(2) { animation-delay: -1.0s; }
|
||||
&:nth-child(3) { animation-delay: -0.9s; }
|
||||
&:nth-child(4) { animation-delay: -0.8s; }
|
||||
&:nth-child(5) { animation-delay: -0.7s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-bounce {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
20% {
|
||||
transform: scaleY(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
// Spinner Loader
|
||||
.spinner-loader {
|
||||
.spinner-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 6px solid var(--loader-secondary);
|
||||
border-top: 6px solid var(--loader-color);
|
||||
border-radius: 50%;
|
||||
animation: spinner-rotate 1s linear infinite;
|
||||
position: relative;
|
||||
|
||||
.spinner-inner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid var(--loader-secondary);
|
||||
border-top: 3px solid var(--loader-color);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: spinner-rotate 0.5s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinner-rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Dots Loader
|
||||
.dots-loader {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--loader-color);
|
||||
animation: dots-bounce 1.4s ease-in-out infinite both;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.32s; }
|
||||
&:nth-child(2) { animation-delay: -0.16s; }
|
||||
&:nth-child(3) { animation-delay: 0s; }
|
||||
&:nth-child(4) { animation-delay: 0.16s; }
|
||||
&:nth-child(5) { animation-delay: 0.32s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dots-bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient Loader
|
||||
.gradient-loader {
|
||||
.gradient-spinner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
var(--loader-color),
|
||||
var(--loader-secondary),
|
||||
var(--loader-color)
|
||||
);
|
||||
animation: gradient-spin 1.5s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
right: 6px;
|
||||
bottom: 6px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
|
||||
[data-layout-mode="dark_mode"] & {
|
||||
background: #1d1d42;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Bounce Loader
|
||||
.bounce-loader {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.bounce-ball {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--loader-color);
|
||||
animation: bounce-up-down 1.4s ease-in-out infinite both;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.32s; }
|
||||
&:nth-child(2) { animation-delay: -0.16s; }
|
||||
&:nth-child(3) { animation-delay: 0s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce-up-down {
|
||||
0%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
// Loader Text
|
||||
.loader-text {
|
||||
text-align: center;
|
||||
|
||||
.loading-message {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
|
||||
[data-layout-mode="dark_mode"] & {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-top: 15px;
|
||||
width: 200px;
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
|
||||
[data-layout-mode="dark_mode"] & {
|
||||
background: #67748E;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--loader-color);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--loader-color),
|
||||
var(--loader-secondary),
|
||||
var(--loader-color)
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: progress-shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
|
||||
[data-layout-mode="dark_mode"] & {
|
||||
color: #67748E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.enhanced-loader-content {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.small { transform: scale(0.6); }
|
||||
.medium { transform: scale(0.8); }
|
||||
.large { transform: scale(1); }
|
||||
|
||||
.loader-text .loading-message {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import './LoadingButton.scss';
|
||||
|
||||
const LoadingButton = ({
|
||||
loading = false,
|
||||
children,
|
||||
className = '',
|
||||
variant = 'primary',
|
||||
size = 'medium',
|
||||
disabled = false,
|
||||
loadingText = 'Loading...',
|
||||
spinnerType = 'spinner',
|
||||
onClick,
|
||||
type = 'button',
|
||||
...props
|
||||
}) => {
|
||||
const handleClick = (e) => {
|
||||
if (!loading && !disabled && onClick) {
|
||||
onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
const renderSpinner = () => {
|
||||
switch (spinnerType) {
|
||||
case 'spinner':
|
||||
return <div className="btn-spinner"></div>;
|
||||
case 'dots':
|
||||
return (
|
||||
<div className="btn-dots">
|
||||
<div className="dot"></div>
|
||||
<div className="dot"></div>
|
||||
<div className="dot"></div>
|
||||
</div>
|
||||
);
|
||||
case 'pulse':
|
||||
return <div className="btn-pulse"></div>;
|
||||
default:
|
||||
return <div className="btn-spinner"></div>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
className={`loading-btn ${variant} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''} ${className}`}
|
||||
onClick={handleClick}
|
||||
disabled={loading || disabled}
|
||||
{...props}
|
||||
>
|
||||
<span className={`btn-content ${loading ? 'loading' : ''}`}>
|
||||
{loading && (
|
||||
<span className="btn-loader">
|
||||
{renderSpinner()}
|
||||
</span>
|
||||
)}
|
||||
<span className="btn-text">
|
||||
{loading ? loadingText : children}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadingButton;
|
||||
@@ -0,0 +1,261 @@
|
||||
// Loading Button Styles
|
||||
.loading-btn {
|
||||
position: relative;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 120px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.3);
|
||||
}
|
||||
|
||||
// Size variants
|
||||
&.small {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
padding: 12px 24px;
|
||||
font-size: 18px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
// Color variants
|
||||
&.primary {
|
||||
background: #ff9f43;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.loading):not(.disabled) {
|
||||
background: #e8890a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 159, 67, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.loading):not(.disabled) {
|
||||
background: #5a6268;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.loading):not(.disabled) {
|
||||
background: #218838;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.loading):not(.disabled) {
|
||||
background: #c82333;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.outline-primary {
|
||||
background: transparent;
|
||||
color: #ff9f43;
|
||||
border: 2px solid #ff9f43;
|
||||
|
||||
&:hover:not(.loading):not(.disabled) {
|
||||
background: #ff9f43;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 159, 67, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&.loading {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.8;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
animation: loading-shimmer 1.5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
background: #e9ecef !important;
|
||||
color: #6c757d !important;
|
||||
border-color: #e9ecef !important;
|
||||
|
||||
&:hover {
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Button content
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.loading {
|
||||
.btn-text {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-loader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
// Spinner animations
|
||||
.btn-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: btn-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.btn-dots {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
|
||||
.dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: btn-dots-bounce 1.4s ease-in-out infinite both;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.32s; }
|
||||
&:nth-child(2) { animation-delay: -0.16s; }
|
||||
&:nth-child(3) { animation-delay: 0s; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pulse {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: btn-pulse-scale 1s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes loading-shimmer {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
@keyframes btn-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes btn-dots-bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn-pulse-scale {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode support
|
||||
[data-layout-mode="dark_mode"] {
|
||||
.loading-btn {
|
||||
&.disabled {
|
||||
background: #67748E !important;
|
||||
color: #1d1d42 !important;
|
||||
border-color: #67748E !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.loading-btn {
|
||||
&.small {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as EnhancedLoader } from './EnhancedLoader';
|
||||
export { default as LoadingButton } from './LoadingButton';
|
||||
Reference in New Issue
Block a user