{
  "id": "fanishah_wicked-wasp-20",
  "name": "wicked-wasp-20",
  "category": "loaders",
  "author": "fanishah",
  "description": "wicked-wasp-20 组件 (loader, animation, gradient)",
  "tags": [
    "loader",
    "animation",
    "gradient"
  ],
  "original": {
    "html": "<svg class=\"gegga\">\n    <defs>\n        <filter id=\"gegga\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"></feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10\" result=\"inreGegga\"></feColorMatrix>\n            <feComposite in=\"SourceGraphic\" in2=\"inreGegga\" operator=\"atop\"></feComposite>\n        </filter>\n    </defs>\n</svg>\n<svg class=\"snurra\" width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\n    <defs>\n        <linearGradient id=\"linjärGradient\">\n            <stop class=\"stopp1\" offset=\"0\"></stop>\n            <stop class=\"stopp2\" offset=\"1\"></stop>\n        </linearGradient>\n        <linearGradient y2=\"160\" x2=\"160\" y1=\"40\" x1=\"40\" gradientUnits=\"userSpaceOnUse\" id=\"gradient\" xlink:href=\"#linjärGradient\"></linearGradient>\n    </defs>\n    <path class=\"halvan\" d=\"m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64\"></path>\n    <circle class=\"strecken\" cx=\"100\" cy=\"100\" r=\"64\"></circle>\n</svg>\n<svg class=\"skugga\" width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\n    <path class=\"halvan\" d=\"m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64\"></path>\n    <circle class=\"strecken\" cx=\"100\" cy=\"100\" r=\"64\"></circle>\n</svg>",
    "css": "/* From Uiverse.io by fanishah - Tags: loader */\n.gegga {\n  width: 0;\n}\n\n.snurra {\n  filter: url(#gegga);\n}\n\n.stopp1 {\n  stop-color: #f700a8;\n}\n\n.stopp2 {\n  stop-color: #ff8000;\n}\n\n.halvan {\n  animation: Snurra1 10s infinite linear;\n  stroke-dasharray: 180 800;\n  fill: none;\n  stroke: url(#gradient);\n  stroke-width: 23;\n  stroke-linecap: round;\n}\n\n.strecken {\n  animation: Snurra1 3s infinite linear;\n  stroke-dasharray: 26 54;\n  fill: none;\n  stroke: url(#gradient);\n  stroke-width: 23;\n  stroke-linecap: round;\n}\n\n.skugga {\n  filter: blur(5px);\n  opacity: 0.3;\n  position: absolute;\n  transform: translate(3px, 3px);\n}\n\n@keyframes Snurra1 {\n  0% {\n    stroke-dashoffset: 0;\n  }\n\n  100% {\n    stroke-dashoffset: -403px;\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/fanishah_wicked-wasp-20.html"
  },
  "uniapp": {
    "template": "<view class=\"gegga\"></view>\n    <defs>\n        <filter id=\"gegga\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"blur\"></feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10\" result=\"inreGegga\"></feColorMatrix>\n            <feComposite in=\"SourceGraphic\" in2=\"inreGegga\" operator=\"atop\"></feComposite>\n        </filter>\n    </defs>\n</svg>\n<view class=\"snurra\" width=\"200\" height=\"200\" viewBox=\"0 0 200 200\"></view>\n    <defs>\n        <linearGradient id=\"linjärGradient\">\n            <stop class=\"stopp1\" offset=\"0\"></stop>\n            <stop class=\"stopp2\" offset=\"1\"></stop>\n        </linearGradient>\n        <linearGradient y2=\"160\" x2=\"160\" y1=\"40\" x1=\"40\" gradientUnits=\"userSpaceOnUse\" id=\"gradient\" xlink:href=\"#linjärGradient\"></linearGradient>\n    </defs>\n    <path class=\"halvan\" d=\"m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64\"></path>\n    <circle class=\"strecken\" cx=\"100\" cy=\"100\" r=\"64\"></circle>\n</svg>\n<view class=\"skugga\" width=\"200\" height=\"200\" viewBox=\"0 0 200 200\"></view>\n    <path class=\"halvan\" d=\"m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64\"></path>\n    <circle class=\"strecken\" cx=\"100\" cy=\"100\" r=\"64\"></circle>\n</svg>",
    "script": "export default {\n  name: 'GalaxyWickedWasp20',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by fanishah - Tags: loader */\n.gegga {\n  width: 0;\n}\n\n.snurra {\n  \n}\n\n.stopp1 {\n  stop-color: #f700a8;\n}\n\n.stopp2 {\n  stop-color: #ff8000;\n}\n\n.halvan {\n  animation: Snurra1 10s infinite linear;\n  stroke-dasharray: 180 800;\n  fill: none;\n  stroke: url(#gradient);\n  stroke-width: 23;\n  stroke-linecap: round;\n}\n\n.strecken {\n  animation: Snurra1 3s infinite linear;\n  stroke-dasharray: 26 54;\n  fill: none;\n  stroke: url(#gradient);\n  stroke-width: 23;\n  stroke-linecap: round;\n}\n\n.skugga {\n  \n  opacity: 0.3;\n  position: absolute;\n  transform: translate(6rpx, 6rpx);\n}\n\n@keyframes Snurra1 {\n  0% {\n    stroke-dashoffset: 0;\n  }\n\n  100% {\n    stroke-dashoffset: -806rpx;\n  }\n}\n\n",
    "component_name": "GalaxyWickedWasp20"
  },
  "platforms": {
    "h5": true,
    "mp-weixin": true,
    "mp-alipay": true,
    "mp-baidu": true,
    "mp-toutiao": true,
    "app-plus": true
  },
  "props": [
    {
      "name": "disabled",
      "type": "Boolean",
      "default": false,
      "required": false,
      "description": "是否禁用"
    }
  ],
  "events": [],
  "slots": [
    {
      "name": "",
      "description": "",
      "props": []
    }
  ],
  "compatibility": {
    "h5": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-weixin": {
      "supported": true,
      "issues": [
        "不支持 filter 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 filter 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "medium",
    "bundle_size": 2440,
    "render_cost": "medium",
    "memory_usage": "medium"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:42.063Z",
  "updated_at": "2025-07-31T07:55:42.063Z"
}