{ "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": "
\n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
", "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": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "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" }