ProgressIndicator.css•5.49 kB
/* 通用样式 */
.progress-message {
font-size: 14px;
color: #6b7280;
margin-bottom: 8px;
text-align: center;
}
/* 线性进度条 */
.progress-linear {
width: 100%;
}
.progress-linear.small {
font-size: 12px;
}
.progress-linear.medium {
font-size: 14px;
}
.progress-linear.large {
font-size: 16px;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: #e5e7eb;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.progress-linear.small .progress-bar {
height: 4px;
}
.progress-linear.large .progress-bar {
height: 12px;
}
.progress-fill {
height: 100%;
background-color: #3b82f6;
border-radius: 4px;
transition: width 0.3s ease;
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.progress-percentage {
text-align: center;
margin-top: 4px;
font-weight: 500;
color: #374151;
}
/* 状态颜色 */
.progress-linear.success .progress-fill {
background-color: #10b981;
}
.progress-linear.error .progress-fill {
background-color: #ef4444;
}
.progress-linear.paused .progress-fill {
background-color: #f59e0b;
}
/* 圆形进度条 */
.progress-circular {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.progress-circular svg {
transform: rotate(-90deg);
}
.progress-circle {
transition: stroke-dashoffset 0.3s ease;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
color: #374151;
}
.progress-circular.small .progress-text {
font-size: 10px;
}
.progress-circular.medium .progress-text {
font-size: 12px;
}
.progress-circular.large .progress-text {
font-size: 16px;
}
/* 步骤进度条 */
.progress-steps {
width: 100%;
}
.steps-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.step {
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
}
.step-indicator {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.step-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
background-color: #e5e7eb;
color: #6b7280;
transition: all 0.3s ease;
}
.step.pending .step-icon {
background-color: #e5e7eb;
color: #6b7280;
}
.step.active .step-icon {
background-color: #3b82f6;
color: white;
animation: pulse 2s infinite;
}
.step.completed .step-icon {
background-color: #10b981;
color: white;
}
.step.error .step-icon {
background-color: #ef4444;
color: white;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
}
}
.step-connector {
width: 2px;
height: 32px;
background-color: #e5e7eb;
margin-top: 4px;
transition: background-color 0.3s ease;
}
.step-connector.completed {
background-color: #10b981;
}
.step-content {
flex: 1;
padding-top: 2px;
}
.step-label {
font-weight: 500;
color: #374151;
margin-bottom: 2px;
}
.step-description {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.step.active .step-label {
color: #3b82f6;
}
.step.completed .step-label {
color: #10b981;
}
.step.error .step-label {
color: #ef4444;
}
/* 小尺寸步骤 */
.progress-steps.small .step-icon {
width: 20px;
height: 20px;
font-size: 10px;
}
.progress-steps.small .step-connector {
height: 24px;
}
.progress-steps.small .step-label {
font-size: 12px;
}
.progress-steps.small .step-description {
font-size: 11px;
}
/* 大尺寸步骤 */
.progress-steps.large .step-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
.progress-steps.large .step-connector {
height: 40px;
}
.progress-steps.large .step-label {
font-size: 16px;
}
.progress-steps.large .step-description {
font-size: 14px;
}
/* 加载旋转器 */
.loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.spinner {
border: 3px solid #e5e7eb;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-spinner.small .spinner {
width: 20px;
height: 20px;
border-width: 2px;
}
.loading-spinner.medium .spinner {
width: 32px;
height: 32px;
}
.loading-spinner.large .spinner {
width: 48px;
height: 48px;
border-width: 4px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner-message {
font-size: 14px;
color: #6b7280;
text-align: center;
}
/* 脉冲加载器 */
.pulse-loader {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
}
.pulse-dot {
border-radius: 50%;
background-color: #3b82f6;
animation: pulse-scale 1.4s infinite ease-in-out;
}
.pulse-loader.small .pulse-dot {
width: 6px;
height: 6px;
}
.pulse-loader.medium .pulse-dot {
width: 8px;
height: 8px;
}
.pulse-loader.large .pulse-dot {
width: 12px;
height: 12px;
}
@keyframes pulse-scale {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}