{
  "id": "Subaashbala_tender-baboon-47",
  "name": "tender-baboon-47",
  "category": "loaders",
  "author": "Subaashbala",
  "description": "tender-baboon-47 组件 (loader, game, animated, bounce animation, animation, gradient)",
  "tags": [
    "loader",
    "game",
    "animated",
    "bounce animation",
    "animation",
    "gradient"
  ],
  "original": {
    "html": "<div class=\"loader\">\n  <svg width=\"115\" height=\"81\" viewBox=\"0 0 115 81\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" id=\"bird\">\n    <rect x=\"41\" y=\"47\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"35\" y=\"67\" width=\"33\" height=\"7\" fill=\"#FFC107\"></rect>\n    <rect x=\"21\" y=\"54\" width=\"40\" height=\"14\" fill=\"#FFC107\"></rect>\n    <rect x=\"48\" y=\"40\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"48\" y=\"33\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"41\" y=\"27\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"34\" y=\"20\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"28\" y=\"14\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"40\" y=\"7\" width=\"21\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"41\" y=\"34\" width=\"7\" height=\"13\" fill=\"black\"></rect>\n    <rect x=\"21\" y=\"14\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"41\" width=\"40\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"28\" y=\"7\" width=\"13\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"7\" y=\"27\" width=\"34\" height=\"27\" fill=\"#FFFFCC\"></rect>\n    <rect x=\"61\" y=\"12\" width=\"34\" height=\"28\" fill=\"white\"></rect>\n    <rect x=\"7\" y=\"20\" width=\"27\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"34\" y=\"27\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"7\" y=\"40\" width=\"7\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"34\" y=\"40\" width=\"7\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"48\" y=\"14\" width=\"7\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"7\" y=\"47\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"14\" y=\"47\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect y=\"47\" width=\"20\" height=\"7\" transform=\"rotate(-90 0 47)\" fill=\"black\"></rect>\n    <rect x=\"34\" y=\"47\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"88\" y=\"13\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"81\" y=\"6\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"95\" y=\"40\" width=\"20\" height=\"7\" transform=\"rotate(-90 95 40)\" fill=\"black\"></rect>\n    <rect x=\"81\" y=\"33\" width=\"13\" height=\"7\" transform=\"rotate(-90 81 33)\" fill=\"black\"></rect>\n    <rect x=\"81\" y=\"13\" width=\"13\" height=\"7\" transform=\"rotate(-180 81 13)\" fill=\"white\"></rect>\n    <rect x=\"61\" y=\"33\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"61\" y=\"6\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"54\" y=\"33\" width=\"20\" height=\"7\" transform=\"rotate(-90 54 33)\" fill=\"black\"></rect>\n    <rect x=\"14\" y=\"60\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"21\" y=\"67\" width=\"14\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"35\" y=\"74\" width=\"33\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"14\" y=\"54\" width=\"20\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"108\" y=\"47\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"53\" width=\"33\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"46\" width=\"40\" height=\"7\" fill=\"#F44336\"></rect>\n    <rect x=\"65\" y=\"60\" width=\"40\" height=\"7\" fill=\"#F44336\"></rect>\n    <rect x=\"101\" y=\"67\" width=\"14\" height=\"7\" transform=\"rotate(-90 101 67)\" fill=\"black\"></rect>\n    <rect x=\"61\" y=\"46\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"40\" width=\"40\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"67\" width=\"33\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"54\" y=\"53\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"61\" y=\"53\" width=\"7\" height=\"7\" fill=\"#F44336\"></rect>\n    <rect x=\"61\" y=\"60\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n  </svg>\n\n  <div class=\"sceneTop\">\n    <div class=\"flappyBirdScene\">\n      <div class=\"birdObs1\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs2\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs3\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs4\" id=\"birdObstacle\"></div>\n    </div>\n    <div class=\"flappyBirdScene\">\n      <div class=\"birdObs1\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs2\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs3\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs4\" id=\"birdObstacle\"></div>\n    </div>\n  </div>\n  <div class=\"sceneBottom\">\n    <div class=\"flappyBirdSceneBottom\">\n      <div class=\"birdObs1\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs2\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs3\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs4\" id=\"birdObstacle\"></div>\n    </div>\n    <div class=\"flappyBirdSceneBottom\">\n      <div class=\"birdObs1\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs2\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs3\" id=\"birdObstacle\"></div>\n      <div class=\"birdObs4\" id=\"birdObstacle\"></div>\n    </div>\n  </div>\n</div>",
    "css": "/* From Uiverse.io by Subaashbala  - Tags: loader, game, animated, bounce animation */\n.loader {\n  position: relative;\n  width: 18rem; /* Reposition the obstacles and the bird if the width is changed */\n  aspect-ratio: 1;\n  overflow: hidden;\n  border-radius: 50%;\n  background: linear-gradient(to bottom, #6ccee7 60%, white);\n}\n#bird {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-80%, -50%);\n  width: 3rem;\n  height: auto;\n  animation: flap 500ms linear infinite;\n}\n.flappyBirdScene,\n.flappyBirdSceneBottom {\n  display: flex;\n  width: 20rem;\n  top: -23%;\n  position: relative;\n}\n.sceneTop {\n  display: flex;\n  width: fit-content;\n  animation: flow 5s linear infinite;\n}\n.sceneBottom {\n  display: flex;\n  width: fit-content;\n  animation: flowBottom 5s linear infinite;\n}\n#birdObstacle {\n  height: 8rem;\n  width: 2rem;\n  background: linear-gradient(\n    to right,\n    #9de558 0px,\n    #9de558 3px,\n    #e7ff8d 3px,\n    #e7ff8d 5px,\n    #9de858 5px,\n    #9de858 10px,\n    #74c029 10px,\n    #74c029 13px,\n    #9de558 13px,\n    #9de558 15px,\n    #74c029 22px,\n    #74c029 28px,\n    #59811a 28px,\n    #59811a 100%\n  );\n  border: solid;\n  position: relative;\n}\n.flappyBirdSceneBottom {\n  bottom: -25%;\n  left: 0;\n}\n#birdObstacle::after {\n  content: \"\";\n  position: absolute;\n  width: 135%;\n  height: 1.25rem;\n  top: 100%;\n  left: 50%;\n  border: solid;\n  transform: translate(-50%, 0);\n  background: linear-gradient(\n    to right,\n    #9de558 0px,\n    #9de558 3px,\n    #e7ff8d 3px,\n    #e7ff8d 5px,\n    #9de858 5px,\n    #9de858 10px,\n    #74c029 10px,\n    #74c029 13px,\n    #9de558 13px,\n    #9de558 15px,\n    #74c029 22px,\n    #74c029 28px,\n    #59811a 28px,\n    #59811a 100%\n  );\n}\n.birdObs2 {\n  transform: translate(0%, 15%);\n  left: 15%;\n}\n.birdObs3 {\n  transform: translate(0, 18%);\n  left: 30%;\n}\n.birdObs4 {\n  transform: translate(0, 15%);\n  left: 45%;\n}\n@keyframes flap {\n  from {\n    transform: translate(-80%, -50%);\n  }\n  25% {\n    transform: translate(-80%, -50%) rotate(-15deg);\n  }\n  50% {\n    transform: translate(-80%, -12%) rotate(5deg);\n  }\n  100% {\n    transform: translate(-80%, -50%);\n  }\n}\n@keyframes flow {\n  from {\n    transform: translate(0, -43%);\n  }\n  to {\n    transform: translate(-50%, -43%);\n  }\n}\n@keyframes flowBottom {\n  from {\n    transform: translate(0, 75%) rotateX(180deg);\n  }\n  to {\n    transform: translate(-50%, 75%) rotateX(180deg);\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/Subaashbala_tender-baboon-47.html"
  },
  "uniapp": {
    "template": "<view class=\"loader\"></view>\n  <view width=\"115\" height=\"81\" viewBox=\"0 0 115 81\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" id=\"bird\"></view>\n    <rect x=\"41\" y=\"47\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"35\" y=\"67\" width=\"33\" height=\"7\" fill=\"#FFC107\"></rect>\n    <rect x=\"21\" y=\"54\" width=\"40\" height=\"14\" fill=\"#FFC107\"></rect>\n    <rect x=\"48\" y=\"40\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"48\" y=\"33\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"41\" y=\"27\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"34\" y=\"20\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"28\" y=\"14\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"40\" y=\"7\" width=\"21\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"41\" y=\"34\" width=\"7\" height=\"13\" fill=\"black\"></rect>\n    <rect x=\"21\" y=\"14\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"41\" width=\"40\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"28\" y=\"7\" width=\"13\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"7\" y=\"27\" width=\"34\" height=\"27\" fill=\"#FFFFCC\"></rect>\n    <rect x=\"61\" y=\"12\" width=\"34\" height=\"28\" fill=\"white\"></rect>\n    <rect x=\"7\" y=\"20\" width=\"27\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"34\" y=\"27\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"7\" y=\"40\" width=\"7\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"34\" y=\"40\" width=\"7\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"48\" y=\"14\" width=\"7\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect x=\"7\" y=\"47\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"14\" y=\"47\" width=\"20\" height=\"7\" fill=\"#FFEB3B\"></rect>\n    <rect y=\"47\" width=\"20\" height=\"7\" transform=\"rotate(-90 0 47)\" fill=\"black\"></rect>\n    <rect x=\"34\" y=\"47\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"88\" y=\"13\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"81\" y=\"6\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"95\" y=\"40\" width=\"20\" height=\"7\" transform=\"rotate(-90 95 40)\" fill=\"black\"></rect>\n    <rect x=\"81\" y=\"33\" width=\"13\" height=\"7\" transform=\"rotate(-90 81 33)\" fill=\"black\"></rect>\n    <rect x=\"81\" y=\"13\" width=\"13\" height=\"7\" transform=\"rotate(-180 81 13)\" fill=\"white\"></rect>\n    <rect x=\"61\" y=\"33\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"61\" y=\"6\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"54\" y=\"33\" width=\"20\" height=\"7\" transform=\"rotate(-90 54 33)\" fill=\"black\"></rect>\n    <rect x=\"14\" y=\"60\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"21\" y=\"67\" width=\"14\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"35\" y=\"74\" width=\"33\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"14\" y=\"54\" width=\"20\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"108\" y=\"47\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"53\" width=\"33\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"46\" width=\"40\" height=\"7\" fill=\"#F44336\"></rect>\n    <rect x=\"65\" y=\"60\" width=\"40\" height=\"7\" fill=\"#F44336\"></rect>\n    <rect x=\"101\" y=\"67\" width=\"14\" height=\"7\" transform=\"rotate(-90 101 67)\" fill=\"black\"></rect>\n    <rect x=\"61\" y=\"46\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"40\" width=\"40\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"68\" y=\"67\" width=\"33\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"54\" y=\"53\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n    <rect x=\"61\" y=\"53\" width=\"7\" height=\"7\" fill=\"#F44336\"></rect>\n    <rect x=\"61\" y=\"60\" width=\"7\" height=\"7\" fill=\"black\"></rect>\n  </svg>\n\n  <view class=\"sceneTop\"></view>\n    <view class=\"flappyBirdScene\"></view>\n      <view class=\"birdObs1\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs2\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs3\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs4\" id=\"birdObstacle\"></view>\n    </div>\n    <view class=\"flappyBirdScene\"></view>\n      <view class=\"birdObs1\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs2\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs3\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs4\" id=\"birdObstacle\"></view>\n    </div>\n  </div>\n  <view class=\"sceneBottom\"></view>\n    <view class=\"flappyBirdSceneBottom\"></view>\n      <view class=\"birdObs1\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs2\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs3\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs4\" id=\"birdObstacle\"></view>\n    </div>\n    <view class=\"flappyBirdSceneBottom\"></view>\n      <view class=\"birdObs1\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs2\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs3\" id=\"birdObstacle\"></view>\n      <view class=\"birdObs4\" id=\"birdObstacle\"></view>\n    </div>\n  </div>\n</div>",
    "script": "export default {\n  name: 'GalaxyTenderBaboon47',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by Subaashbala  - Tags: loader, game, animated, bounce animation */\n.loader {\n  position: relative;\n  width: 18rem; /* Reposition the obstacles and the bird if the width is changed */\n  aspect-ratio: 1;\n  overflow: hidden;\n  border-radius: 50%;\n  background: linear-gradient(to bottom, #6ccee7 60%, white);\n}\n#bird {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-80%, -50%);\n  width: 3rem;\n  height: auto;\n  animation: flap 500ms linear infinite;\n}\n.flappyBirdScene,\n.flappyBirdSceneBottom {\n  display: flex;\n  width: 20rem;\n  top: -23%;\n  position: relative;\n}\n.sceneTop {\n  display: flex;\n  width: fit-content;\n  animation: flow 5s linear infinite;\n}\n.sceneBottom {\n  display: flex;\n  width: fit-content;\n  animation: flowBottom 5s linear infinite;\n}\n#birdObstacle {\n  height: 8rem;\n  width: 2rem;\n  background: linear-gradient(\n    to right,\n    #9de558 0rpx,\n    #9de558 6rpx,\n    #e7ff8d 6rpx,\n    #e7ff8d 10rpx,\n    #9de858 10rpx,\n    #9de858 20rpx,\n    #74c029 20rpx,\n    #74c029 26rpx,\n    #9de558 26rpx,\n    #9de558 30rpx,\n    #74c029 44rpx,\n    #74c029 56rpx,\n    #59811a 56rpx,\n    #59811a 100%\n  );\n  border: solid;\n  position: relative;\n}\n.flappyBirdSceneBottom {\n  bottom: -25%;\n  left: 0;\n}\n#birdObstacle::after {\n  content: \"\";\n  position: absolute;\n  width: 135%;\n  height: 1.25rem;\n  top: 100%;\n  left: 50%;\n  border: solid;\n  transform: translate(-50%, 0);\n  background: linear-gradient(\n    to right,\n    #9de558 0rpx,\n    #9de558 6rpx,\n    #e7ff8d 6rpx,\n    #e7ff8d 10rpx,\n    #9de858 10rpx,\n    #9de858 20rpx,\n    #74c029 20rpx,\n    #74c029 26rpx,\n    #9de558 26rpx,\n    #9de558 30rpx,\n    #74c029 44rpx,\n    #74c029 56rpx,\n    #59811a 56rpx,\n    #59811a 100%\n  );\n}\n.birdObs2 {\n  transform: translate(0%, 15%);\n  left: 15%;\n}\n.birdObs3 {\n  transform: translate(0, 18%);\n  left: 30%;\n}\n.birdObs4 {\n  transform: translate(0, 15%);\n  left: 45%;\n}\n@keyframes flap {\n  from {\n    transform: translate(-80%, -50%);\n  }\n  25% {\n    transform: translate(-80%, -50%) rotate(-15deg);\n  }\n  50% {\n    transform: translate(-80%, -12%) rotate(5deg);\n  }\n  100% {\n    transform: translate(-80%, -50%);\n  }\n}\n@keyframes flow {\n  from {\n    transform: translate(0, -43%);\n  }\n  to {\n    transform: translate(-50%, -43%);\n  }\n}\n@keyframes flowBottom {\n  from {\n    transform: translate(0, 75%) rotateX(180deg);\n  }\n  to {\n    transform: translate(-50%, 75%) rotateX(180deg);\n  }\n}\n\n",
    "component_name": "GalaxyTenderBaboon47"
  },
  "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": 6998,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:40.643Z",
  "updated_at": "2025-07-31T07:55:40.643Z"
}