galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
87 lines • 10.6 kB
JSON
{
"id": "Tsiangana_mighty-grasshopper-37",
"name": "mighty-grasshopper-37",
"category": "loaders",
"author": "Tsiangana",
"description": "mighty-grasshopper-37 组件 (animation, loader, loading animation, anime)",
"tags": [
"animation",
"loader",
"loading animation",
"anime"
],
"original": {
"html": "<div class=\"loader\">\n <svg width=\"200\" height=\"200\">\n <circle class=\"traco\" cx=\"100\" cy=\"100\" r=\"70\" fill=\"transparent\" stroke=\"#ffe71c\" stroke-width=\"9\" stroke-dasharray=\"35 20\" transform=\"rotate(31 100 100)\"></circle>\n </svg>\n <div class=\"p1\"></div>\n <div class=\"p2\"></div>\n <div class=\"p3\"></div>\n <div class=\"p4\"></div>\n <div class=\"p5\"></div>\n <div class=\"p6\"></div>\n <div class=\"p7\"></div>\n <div class=\"p8\"></div>\n <div class=\"circle\">\n <div class=\"content\">\n <div class=\"eyes\">\n <div class=\"eye-left\"></div>\n <div class=\"eye-right\"></div>\n </div>\n <div class=\"nouse\"></div>\n <div class=\"mouth\"></div>\n <div class=\"teeth\">\n <div class=\"tooth\"></div>\n <div class=\"tooth\"></div>\n <div class=\"tooth\"></div>\n <div class=\"tooth\"></div>\n </div>\n </div>\n </div>\n</div>",
"css": "/* From Uiverse.io by Tsiangana - Tags: animation, loader, loading animation, anime */\n.loader {\n width: 200px;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: float 2s ease-in-out infinite;\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-12px);\n }\n}\n\n.loader:before {\n content: \"\";\n width: 10px;\n height: 7px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.9);\n position: absolute;\n bottom: -9px;\n animation: shadow046 2s alternate infinite ease;\n}\n@keyframes shadow046 {\n 0% {\n transform: scaleX(1);\n }\n 40% {\n transform: scaleX(15);\n opacity: 0.7;\n }\n}\n\n.circle {\n width: 140px;\n height: 140px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n}\n.loader .p1 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -118px;\n margin-left: 3px;\n}\n.loader .p2 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 118px;\n margin-left: 3px;\n}\n\n.loader .p3 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n transform: rotate(90deg);\n margin-right: -120px;\n}\n.loader .p4 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n transform: rotate(90deg);\n margin-right: 119px;\n}\n.loader .p5 {\n height: 25px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -84px;\n margin-right: -89px;\n transform: rotate(45deg);\n}\n.loader .p6 {\n height: 23px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 88px;\n margin-right: 84px;\n transform: rotate(45deg);\n}\n.loader .p7 {\n height: 23px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -86px;\n margin-right: 80px;\n transform: rotate(-45deg);\n}\n.loader .p8 {\n height: 23px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 80px;\n margin-right: -83px;\n transform: rotate(-45deg);\n}\n.circle .traco {\n position: absolute;\n z-index: -99;\n}\n.loader .content {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 4px solid #ffe71c;\n overflow: hidden;\n}\n.content .eyes {\n width: 80px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 18px auto 0px;\n padding: 3.5px 10px;\n}\n.eyes .eye-left {\n width: 22px;\n height: 100%;\n background-color: #ffe71c;\n border-radius: 50%;\n}\n.eyes .eye-right {\n width: 22px;\n height: 100%;\n background-color: #ffe71c;\n border-radius: 50%;\n}\n\n.content .nouse {\n margin: -4px auto;\n height: 5px;\n width: 5px;\n border-radius: 50%;\n background-color: #ffe71c;\n}\n.content .mouth {\n margin: 9px auto 0;\n height: 3px;\n width: 100%;\n background-color: #ffe71c;\n}\n.content .teeth {\n margin: 0 auto;\n height: 37px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 12px;\n}\n.teeth .tooth {\n height: 100%;\n width: 4px;\n background-color: #ffe71c;\n}",
"file_path": "/mnt/persist/workspace/loaders/Tsiangana_mighty-grasshopper-37.html"
},
"uniapp": {
"template": "<view class=\"loader\"></view>\n <view width=\"200\" height=\"200\"></view>\n <circle class=\"traco\" cx=\"100\" cy=\"100\" r=\"70\" fill=\"transparent\" stroke=\"#ffe71c\" stroke-width=\"9\" stroke-dasharray=\"35 20\" transform=\"rotate(31 100 100)\"></circle>\n </svg>\n <view class=\"p1\"></view>\n <view class=\"p2\"></view>\n <view class=\"p3\"></view>\n <view class=\"p4\"></view>\n <view class=\"p5\"></view>\n <view class=\"p6\"></view>\n <view class=\"p7\"></view>\n <view class=\"p8\"></view>\n <view class=\"circle\"></view>\n <view class=\"content\"></view>\n <view class=\"eyes\"></view>\n <view class=\"eye-left\"></view>\n <view class=\"eye-right\"></view>\n </div>\n <view class=\"nouse\"></view>\n <view class=\"mouth\"></view>\n <view class=\"teeth\"></view>\n <view class=\"tooth\"></view>\n <view class=\"tooth\"></view>\n <view class=\"tooth\"></view>\n <view class=\"tooth\"></view>\n </div>\n </div>\n </div>\n</div>",
"script": "export default {\n name: 'GalaxyMightyGrasshopper37',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by Tsiangana - Tags: animation, loader, loading animation, anime */\n.loader {\n width: 400rpx;\n height: 400rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: float 2s ease-in-out infinite;\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-24rpx);\n }\n}\n\n.loader:before {\n content: \"\";\n width: 20rpx;\n height: 14rpx;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.9);\n position: absolute;\n bottom: -18rpx;\n animation: shadow046 2s alternate infinite ease;\n}\n@keyframes shadow046 {\n 0% {\n transform: scaleX(1);\n }\n 40% {\n transform: scaleX(15);\n opacity: 0.7;\n }\n}\n\n.circle {\n width: 280rpx;\n height: 280rpx;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n}\n.loader .p1 {\n height: 40rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -236rpx;\n margin-left: 6rpx;\n}\n.loader .p2 {\n height: 40rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 236rpx;\n margin-left: 6rpx;\n}\n\n.loader .p3 {\n height: 40rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n transform: rotate(90deg);\n margin-right: -240rpx;\n}\n.loader .p4 {\n height: 40rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n transform: rotate(90deg);\n margin-right: 238rpx;\n}\n.loader .p5 {\n height: 50rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -168rpx;\n margin-right: -178rpx;\n transform: rotate(45deg);\n}\n.loader .p6 {\n height: 46rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 176rpx;\n margin-right: 168rpx;\n transform: rotate(45deg);\n}\n.loader .p7 {\n height: 46rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -172rpx;\n margin-right: 160rpx;\n transform: rotate(-45deg);\n}\n.loader .p8 {\n height: 46rpx;\n width: 14rpx;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 160rpx;\n margin-right: -166rpx;\n transform: rotate(-45deg);\n}\n.circle .traco {\n position: absolute;\n z-index: -99;\n}\n.loader .content {\n width: 200rpx;\n height: 200rpx;\n border-radius: 50%;\n border: 8rpx solid #ffe71c;\n overflow: hidden;\n}\n.content .eyes {\n width: 160rpx;\n height: 60rpx;\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 36rpx auto 0rpx;\n padding: 7rpx 20rpx;\n}\n.eyes .eye-left {\n width: 44rpx;\n height: 100%;\n background-color: #ffe71c;\n border-radius: 50%;\n}\n.eyes .eye-right {\n width: 44rpx;\n height: 100%;\n background-color: #ffe71c;\n border-radius: 50%;\n}\n\n.content .nouse {\n margin: -8rpx auto;\n height: 10rpx;\n width: 10rpx;\n border-radius: 50%;\n background-color: #ffe71c;\n}\n.content .mouth {\n margin: 18rpx auto 0;\n height: 6rpx;\n width: 100%;\n background-color: #ffe71c;\n}\n.content .teeth {\n margin: 0 auto;\n height: 74rpx;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24rpx;\n}\n.teeth .tooth {\n height: 100%;\n width: 8rpx;\n background-color: #ffe71c;\n}\n\n",
"component_name": "GalaxyMightyGrasshopper37"
},
"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": 3977,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:40.694Z",
"updated_at": "2025-07-31T07:55:40.694Z"
}