进度条加载

{
  "slug": "progress-bar",
  "name": "进度条加载",
  "nameEn": "Progress Bar",
  "description": "进度条从左到右填充并带有光泽扫过效果，适合加载状态和进度指示场景。",
  "descriptionEn": "Progress bar fills from left to right with a shimmer sweep effect. Ideal for loading states and progress indicators.",
  "category": "loading",
  "tags": [
    "loading",
    "progress",
    "bar",
    "shimmer"
  ],
  "trigger": "continuous",
  "difficulty": "beginner",
  "duration": "2s",
  "easing": "ease-in-out",
  "cssProperties": [
    "width",
    "background-position"
  ],
  "isGPUAccelerated": true,
  "previewBg": "light",
  "keywords": [
    "progress bar",
    "loading bar",
    "shimmer",
    "fill",
    "indicator",
    "status"
  ],
  "useCases": [
    "File upload progress",
    "Page loading indicator",
    "Step completion progress",
    "Data processing feedback"
  ],
  "relatedAnimations": [
    "skeleton-pulse",
    "spinner-dots"
  ],
  "recommendedStyles": [
    "minimalist-flat",
    "corporate-clean",
    "soft-ui"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes progress-fill {\n  from { width: 0%; }\n  to { width: 100%; }\n}\n\n@keyframes progress-shimmer {\n  from { background-position: -200% 0; }\n  to { background-position: 200% 0; }\n}\n\n.progress-bar {\n  height: 4px;\n  border-radius: 9999px;\n  background: #e5e7eb;\n  overflow: hidden;\n}\n\n.progress-bar-fill {\n  height: 100%;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    #6366f1 0%,\n    #818cf8 50%,\n    #6366f1 100%\n  );\n  background-size: 200% 100%;\n  animation:\n    progress-fill 2s ease-in-out both,\n    progress-shimmer 1.5s linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .progress-bar-fill {\n    animation: none;\n    width: 100%;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "@keyframes progress-fill {\n  from { width: 0%; }\n  to { width: 100%; }\n}\n\n@keyframes progress-shimmer {\n  from { background-position: -200% 0; }\n  to { background-position: 200% 0; }\n}\n\n@utility animate-progress-fill {\n  animation:\n    progress-fill 2s ease-in-out both,\n    progress-shimmer 1.5s linear infinite;\n  background: linear-gradient(90deg, #6366f1, #818cf8, #6366f1);\n  background-size: 200% 100%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-progress-fill {\n    animation: none;\n    width: 100%;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n<div className=\"h-1 w-full rounded-full bg-gray-200\">\n  <motion.div\n    className=\"h-full rounded-full bg-indigo-500\"\n    initial={{ width: \"0%\" }}\n    animate={{ width: \"100%\" }}\n    transition={{ duration: 2, ease: \"easeInOut\" }}\n  />\n</div>"
    }
  ]
}