{
  "id": "Salem795_fluffy-cat-65",
  "name": "fluffy-cat-65",
  "category": "loaders",
  "author": "Salem795",
  "description": "fluffy-cat-65 组件 (3d, loader, modern, animation)",
  "tags": [
    "3d",
    "loader",
    "modern",
    "animation"
  ],
  "original": {
    "html": "<div class=\"loader\">\n  <div class=\"truckWrapper\">\n    <div class=\"truckBody\">\n      <svg class=\"trucksvg\" viewBox=\"0 0 198 93\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z\" fill=\"#F83D3D\" stroke=\"#282828\" stroke-width=\"3\"></path>\n        <path d=\"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z\" fill=\"#7D7C7C\" stroke=\"#282828\" stroke-width=\"3\"></path>\n        <path d=\"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"2\"></path>\n        <rect x=\"187\" y=\"63\" width=\"5\" height=\"7\" rx=\"1\" fill=\"#FFFCAB\" stroke=\"#282828\" stroke-width=\"2\"></rect>\n        <rect x=\"193\" y=\"81\" width=\"4\" height=\"11\" rx=\"1\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"2\"></rect>\n        <rect x=\"6.5\" y=\"1.5\" width=\"121\" height=\"90\" rx=\"2.5\" fill=\"#DFDFDF\" stroke=\"#282828\" stroke-width=\"3\"></rect>\n        <rect x=\"1\" y=\"84\" width=\"6\" height=\"4\" rx=\"2\" fill=\"#DFDFDF\" stroke=\"#282828\" stroke-width=\"2\"></rect>\n      </svg>\n    </div>\n    <div class=\"truckTires\">\n      <svg class=\"tiresvg\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"15\" cy=\"15\" r=\"13.5\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"3\"></circle>\n        <circle cx=\"15\" cy=\"15\" r=\"7\" fill=\"#DFDFDF\"></circle>\n      </svg>\n      <svg class=\"tiresvg\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"15\" cy=\"15\" r=\"13.5\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"3\"></circle>\n        <circle cx=\"15\" cy=\"15\" r=\"7\" fill=\"#DFDFDF\"></circle>\n      </svg>\n    </div>\n    <div class=\"road\"></div>\n\n    <svg class=\"lampPost\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 453.459 453.459\" xml:space=\"preserve\">\n      <path d=\"M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993\nc-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514\nc0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16\nc29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914\nh-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75\nv-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795\nV196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z\nM232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017\nh78.747C231.693,100.736,232.77,106.162,232.77,111.694z\"></path>\n    </svg>\n  </div>\n</div>",
    "css": "/* From Uiverse.io by Salem795  - Tags: 3d, loader, modern */\n.loader {\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.truckWrapper {\n  width: 200px;\n  height: 100px;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  align-items: center;\n  justify-content: flex-end;\n  overflow-x: hidden;\n}\n/* truck upper body */\n.truckBody {\n  width: 130px;\n  height: fit-content;\n  margin-bottom: 6px;\n  animation: motion 1s linear infinite;\n}\n/* truck suspension animation*/\n@keyframes motion {\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(3px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n/* truck's tires */\n.truckTires {\n  width: 130px;\n  height: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0px 10px 0px 15px;\n  position: absolute;\n  bottom: 0;\n}\n.truckTires svg {\n  width: 24px;\n}\n\n.road {\n  width: 100%;\n  height: 1.5px;\n  background-color: #282828;\n  position: relative;\n  bottom: 0;\n  align-self: flex-end;\n  border-radius: 3px;\n}\n.road::before {\n  content: \"\";\n  position: absolute;\n  width: 20px;\n  height: 100%;\n  background-color: #282828;\n  right: -50%;\n  border-radius: 3px;\n  animation: roadAnimation 1.4s linear infinite;\n  border-left: 10px solid white;\n}\n.road::after {\n  content: \"\";\n  position: absolute;\n  width: 10px;\n  height: 100%;\n  background-color: #282828;\n  right: -65%;\n  border-radius: 3px;\n  animation: roadAnimation 1.4s linear infinite;\n  border-left: 4px solid white;\n}\n\n.lampPost {\n  position: absolute;\n  bottom: 0;\n  right: -90%;\n  height: 90px;\n  animation: roadAnimation 1.4s linear infinite;\n}\n\n@keyframes roadAnimation {\n  0% {\n    transform: translateX(0px);\n  }\n  100% {\n    transform: translateX(-350px);\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/Salem795_fluffy-cat-65.html"
  },
  "uniapp": {
    "template": "<view class=\"loader\"></view>\n  <view class=\"truckWrapper\"></view>\n    <view class=\"truckBody\"></view>\n      <view class=\"trucksvg\" viewBox=\"0 0 198 93\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n        <path d=\"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z\" fill=\"#F83D3D\" stroke=\"#282828\" stroke-width=\"3\"></path>\n        <path d=\"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z\" fill=\"#7D7C7C\" stroke=\"#282828\" stroke-width=\"3\"></path>\n        <path d=\"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"2\"></path>\n        <rect x=\"187\" y=\"63\" width=\"5\" height=\"7\" rx=\"1\" fill=\"#FFFCAB\" stroke=\"#282828\" stroke-width=\"2\"></rect>\n        <rect x=\"193\" y=\"81\" width=\"4\" height=\"11\" rx=\"1\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"2\"></rect>\n        <rect x=\"6.5\" y=\"1.5\" width=\"121\" height=\"90\" rx=\"2.5\" fill=\"#DFDFDF\" stroke=\"#282828\" stroke-width=\"3\"></rect>\n        <rect x=\"1\" y=\"84\" width=\"6\" height=\"4\" rx=\"2\" fill=\"#DFDFDF\" stroke=\"#282828\" stroke-width=\"2\"></rect>\n      </svg>\n    </div>\n    <view class=\"truckTires\"></view>\n      <view class=\"tiresvg\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n        <circle cx=\"15\" cy=\"15\" r=\"13.5\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"3\"></circle>\n        <circle cx=\"15\" cy=\"15\" r=\"7\" fill=\"#DFDFDF\"></circle>\n      </svg>\n      <view class=\"tiresvg\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n        <circle cx=\"15\" cy=\"15\" r=\"13.5\" fill=\"#282828\" stroke=\"#282828\" stroke-width=\"3\"></circle>\n        <circle cx=\"15\" cy=\"15\" r=\"7\" fill=\"#DFDFDF\"></circle>\n      </svg>\n    </div>\n    <view class=\"road\"></view>\n\n    <view class=\"lampPost\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 453.459 453.459\" xml:space=\"preserve\"></view>\n      <path d=\"M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993\nc-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514\nc0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16\nc29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914\nh-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75\nv-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795\nV196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z\nM232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017\nh78.747C231.693,100.736,232.77,106.162,232.77,111.694z\"></path>\n    </svg>\n  </div>\n</div>",
    "script": "export default {\n  name: 'GalaxyFluffyCat65',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by Salem795  - Tags: 3d, loader, modern */\n.loader {\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.truckWrapper {\n  width: 400rpx;\n  height: 200rpx;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  align-items: center;\n  justify-content: flex-end;\n  overflow-x: hidden;\n}\n/* truck upper body */\n.truckBody {\n  width: 260rpx;\n  height: fit-content;\n  margin-bottom: 12rpx;\n  animation: motion 1s linear infinite;\n}\n/* truck suspension animation*/\n@keyframes motion {\n  0% {\n    transform: translateY(0rpx);\n  }\n  50% {\n    transform: translateY(6rpx);\n  }\n  100% {\n    transform: translateY(0rpx);\n  }\n}\n/* truck's tires */\n.truckTires {\n  width: 260rpx;\n  height: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0rpx 20rpx 0rpx 30rpx;\n  position: absolute;\n  bottom: 0;\n}\n.truckTires svg {\n  width: 48rpx;\n}\n\n.road {\n  width: 100%;\n  height: 3rpx;\n  background-color: #282828;\n  position: relative;\n  bottom: 0;\n  align-self: flex-end;\n  border-radius: 6rpx;\n}\n.road::before {\n  content: \"\";\n  position: absolute;\n  width: 40rpx;\n  height: 100%;\n  background-color: #282828;\n  right: -50%;\n  border-radius: 6rpx;\n  animation: roadAnimation 1.4s linear infinite;\n  border-left: 20rpx solid white;\n}\n.road::after {\n  content: \"\";\n  position: absolute;\n  width: 20rpx;\n  height: 100%;\n  background-color: #282828;\n  right: -65%;\n  border-radius: 6rpx;\n  animation: roadAnimation 1.4s linear infinite;\n  border-left: 8rpx solid white;\n}\n\n.lampPost {\n  position: absolute;\n  bottom: 0;\n  right: -90%;\n  height: 180rpx;\n  animation: roadAnimation 1.4s linear infinite;\n}\n\n@keyframes roadAnimation {\n  0% {\n    transform: translateX(0rpx);\n  }\n  100% {\n    transform: translateX(-700rpx);\n  }\n}\n\n",
    "component_name": "GalaxyFluffyCat65"
  },
  "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": [],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 5357,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:40.213Z",
  "updated_at": "2025-07-31T07:55:40.213Z"
}