/* ═══════════════════════════════════════════
   MIUIX CONSOLE — Progress Component
   进度条 + 加载指示器
   ═══════════════════════════════════════════ */

/* ── Linear Progress ── */
.mx-progress{
  height:4px;background:var(--mx-s3);
  border-radius:var(--mx-r-pill);
  overflow:hidden;
  position:relative;
}
.mx-progress-bar{
  height:100%;
  background:var(--mx-primary);
  border-radius:var(--mx-r-pill);
  transition:width var(--mx-d3) var(--mx-ease);
  position:relative;
}

/* Striped */
.mx-progress-striped .mx-progress-bar{
  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%
  );
  background-size:16px 16px;
}

/* Animated striped */
.mx-progress-animated .mx-progress-bar{
  animation:mx-progress-stripes 0.8s linear infinite;
}
@keyframes mx-progress-stripes{
  from{background-position:16px 0}
  to{background-position:0 0}
}

/* Indeterminate */
.mx-progress-indeterminate{
  overflow:hidden;
}
.mx-progress-indeterminate .mx-progress-bar{
  width:30%;
  animation:mx-progress-slide 1.5s var(--mx-ease) infinite;
}
@keyframes mx-progress-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(400%)}
}

/* Color variants */
.mx-progress-success .mx-progress-bar{background:var(--mx-green)}
.mx-progress-warning .mx-progress-bar{background:var(--mx-amber)}
.mx-progress-error .mx-progress-bar{background:var(--mx-red)}

/* Size */
.mx-progress-sm{height:2px}
.mx-progress-lg{height:8px}

/* With label */
.mx-progress-label{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
  font-size:12px;font-weight:600;color:var(--mx-t2);
}
.mx-progress-label .mx-progress-value{
  color:var(--mx-primary);font-variant-numeric:tabular-nums;
}

/* ── Circular Progress (Spinner) ── */
.mx-spinner{
  width:24px;height:24px;
  border:2.5px solid var(--mx-s3);
  border-top-color:var(--mx-primary);
  border-radius:50%;
  animation:mx-spin 0.7s linear infinite;
}
@keyframes mx-spin{to{transform:rotate(360deg)}}

.mx-spinner-sm{width:18px;height:18px;border-width:2px}
.mx-spinner-lg{width:36px;height:36px;border-width:3px}

/* Dots spinner */
.mx-spinner-dots{
  display:flex;gap:4px;
}
.mx-spinner-dots span{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mx-primary);
  animation:mx-dot-bounce 1.2s ease-in-out infinite;
}
.mx-spinner-dots span:nth-child(2){animation-delay:0.15s}
.mx-spinner-dots span:nth-child(3){animation-delay:0.3s}
@keyframes mx-dot-bounce{
  0%,80%,100%{transform:scale(0.6);opacity:0.4}
  40%{transform:scale(1);opacity:1}
}

/* ── Progress Ring (circular) ── */
.mx-progress-ring{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
}
.mx-progress-ring svg{
  transform:rotate(-90deg);
}
.mx-progress-ring-track{
  fill:none;stroke:var(--mx-s3);stroke-width:4;
}
.mx-progress-ring-bar{
  fill:none;stroke:var(--mx-primary);stroke-width:4;
  stroke-linecap:round;
  transition:stroke-dashoffset var(--mx-d3) var(--mx-ease);
}
.mx-progress-ring-text{
  position:absolute;
  font-size:12px;font-weight:700;
  color:var(--mx-text);
  font-variant-numeric:tabular-nums;
}

/* Mobile */
@media(max-width:767px){
  .mx-progress{height:6px}
  .mx-progress-lg{height:10px}
  .mx-spinner{width:28px;height:28px}
  .mx-spinner-lg{width:40px;height:40px}
}