{ "id": "aadium_wonderful-otter-43", "name": "wonderful-otter-43", "category": "loaders", "author": "aadium", "description": "wonderful-otter-43 组件 (loader, clock, timer, animation)", "tags": [ "loader", "clock", "timer", "animation" ], "original": { "html": "
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
", "css": "/* From Uiverse.io by aadium - Tags: loader, clock, timer */\n.cloader {\n width: 10em;\n height: 10em;\n border: 4px solid white;\n border-radius: 50%;\n margin: 50px auto;\n position: relative;\n padding: 2rem;\n}\n\n.clface {\n position: relative;\n width: 100%;\n height: 100%;\n transform: translateY(-3px);\n}\n\n.top {\n height: 10px;\n width: 4px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -30px;\n margin-left: 42px;\n}\n\n.bottom {\n height: 10px;\n width: 4px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: 135px;\n margin-left: 42px;\n}\n\n.left {\n height: 4px;\n width: 10px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -82px;\n margin-left: 112px;\n}\n\n.right {\n height: 4px;\n width: 10px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -4px;\n margin-left: -35px;\n}\n\n.clsface {\n position: absolute;\n width: 40px;\n height: 40px;\n margin-left: 24px;\n margin-top: 15px;\n border-radius: 6em;\n border: 2px solid #636363;\n}\n\n.hand {\n width: 65%;\n height: 4px;\n background-color: white;\n border-radius: 3em;\n border: none;\n position: absolute;\n top: 85%;\n left: -15%;\n transform-origin: 100%;\n transform: rotate(90deg);\n}\n\n.pin {\n width: 25%;\n height: 25%;\n border-radius: 50%;\n background: white;\n position: absolute;\n top: 86%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#sub {\n width: 10%;\n height: 10%;\n border-radius: 50%;\n background: #636363;\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#h1 {\n animation: rotate 4s linear infinite;\n}\n\n#h2 {\n width: 45%;\n left: 5%;\n top: 45%;\n background-color: #636363;\n animation: rotate 1s linear infinite;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(90deg);\n }\n\n to {\n transform: rotate(450deg);\n }\n}", "file_path": "/mnt/persist/workspace/loaders/aadium_wonderful-otter-43.html" }, "uniapp": { "template": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "script": "export default {\n name: 'GalaxyWonderfulOtter43',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}", "style": "\n/* From Uiverse.io by aadium - Tags: loader, clock, timer */\n.cloader {\n width: 10em;\n height: 10em;\n border: 8rpx solid white;\n border-radius: 50%;\n margin: 100rpx auto;\n position: relative;\n padding: 2rem;\n}\n\n.clface {\n position: relative;\n width: 100%;\n height: 100%;\n transform: translateY(-6rpx);\n}\n\n.top {\n height: 20rpx;\n width: 8rpx;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -60rpx;\n margin-left: 84rpx;\n}\n\n.bottom {\n height: 20rpx;\n width: 8rpx;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: 270rpx;\n margin-left: 84rpx;\n}\n\n.left {\n height: 8rpx;\n width: 20rpx;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -164rpx;\n margin-left: 224rpx;\n}\n\n.right {\n height: 8rpx;\n width: 20rpx;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -8rpx;\n margin-left: -70rpx;\n}\n\n.clsface {\n position: absolute;\n width: 80rpx;\n height: 80rpx;\n margin-left: 48rpx;\n margin-top: 30rpx;\n border-radius: 6em;\n border: 4rpx solid #636363;\n}\n\n.hand {\n width: 65%;\n height: 8rpx;\n background-color: white;\n border-radius: 3em;\n border: none;\n position: absolute;\n top: 85%;\n left: -15%;\n transform-origin: 100%;\n transform: rotate(90deg);\n}\n\n.pin {\n width: 25%;\n height: 25%;\n border-radius: 50%;\n background: white;\n position: absolute;\n top: 86%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#sub {\n width: 10%;\n height: 10%;\n border-radius: 50%;\n background: #636363;\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#h1 {\n animation: rotate 4s linear infinite;\n}\n\n#h2 {\n width: 45%;\n left: 5%;\n top: 45%;\n background-color: #636363;\n animation: rotate 1s linear infinite;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(90deg);\n }\n\n to {\n transform: rotate(450deg);\n }\n}\n", "component_name": "GalaxyWonderfulOtter43" }, "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": 2244, "render_cost": "high", "memory_usage": "high" }, "dependencies": [], "examples": [ { "title": "", "description": "", "code": "" } ], "created_at": "2025-07-31T07:55:40.860Z", "updated_at": "2025-07-31T07:55:40.860Z" }