{
"id": "harman-kanda_purple-falcon-85",
"name": "purple-falcon-85",
"category": "loaders",
"author": "harman-kanda",
"description": "purple-falcon-85 组件 (loader, animation)",
"tags": [
"loader",
"animation"
],
"original": {
"html": "",
"css": "/* From Uiverse.io by harman-kanda - Tags: loader */\n/* From cssbuttons.io by @harmankanda.github.io/New */\n\n.pl {\n width: 5em;\n height: 5em;\n}\n\n.pl circle {\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.pl__ring1 {\n animation: ring1 4s 0s ease-in-out infinite;\n}\n\n.pl__ring2 {\n animation: ring2 4s 0.04s ease-in-out infinite;\n}\n\n.pl__ring3 {\n animation: ring3 4s 0.08s ease-in-out infinite;\n}\n\n.pl__ring4 {\n animation: ring4 4s 0.12s ease-in-out infinite;\n}\n\n.pl__ring5 {\n animation: ring5 4s 0.16s ease-in-out infinite;\n}\n\n.pl__ring6 {\n animation: ring6 4s 0.2s ease-in-out infinite;\n}\n\n/* Animations */\n@keyframes ring1 {\n from {\n stroke-dashoffset: -376.237129776;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -94.247778;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -376.237129776;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -94.247778;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -376.237129776;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring2 {\n from {\n stroke-dashoffset: -329.207488554;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -82.46680575;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -329.207488554;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -82.46680575;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -329.207488554;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring3 {\n from {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -72.2566298;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -72.2566298;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring4 {\n from {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -63.61725015;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -63.61725015;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring5 {\n from {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -56.5486668;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -56.5486668;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring6 {\n from {\n stroke-dashoffset: -203.795111962;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -51.05087975;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -203.795111962;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -51.05087975;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -203.795111962;\n transform: rotate(4.75turn);\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/harman-kanda_purple-falcon-85.html"
},
"uniapp": {
"template": "\n \n \n \n \n \n \n",
"script": "export default {\n name: 'GalaxyPurpleFalcon85',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by harman-kanda - Tags: loader */\n/* From cssbuttons.io by @harmankanda.github.io/New */\n\n.pl {\n width: 5em;\n height: 5em;\n}\n\n.pl circle {\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.pl__ring1 {\n animation: ring1 4s 0s ease-in-out infinite;\n}\n\n.pl__ring2 {\n animation: ring2 4s 0.04s ease-in-out infinite;\n}\n\n.pl__ring3 {\n animation: ring3 4s 0.08s ease-in-out infinite;\n}\n\n.pl__ring4 {\n animation: ring4 4s 0.12s ease-in-out infinite;\n}\n\n.pl__ring5 {\n animation: ring5 4s 0.16s ease-in-out infinite;\n}\n\n.pl__ring6 {\n animation: ring6 4s 0.2s ease-in-out infinite;\n}\n\n/* Animations */\n@keyframes ring1 {\n from {\n stroke-dashoffset: -376.237129776;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -94.247778;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -376.237129776;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -94.247778;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -376.237129776;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring2 {\n from {\n stroke-dashoffset: -329.207488554;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -82.46680575;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -329.207488554;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -82.46680575;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -329.207488554;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring3 {\n from {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -72.2566298;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -72.2566298;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring4 {\n from {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -63.61725015;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -63.61725015;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring5 {\n from {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -56.5486668;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -56.5486668;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring6 {\n from {\n stroke-dashoffset: -203.795111962;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -51.05087975;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -203.795111962;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -51.05087975;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -203.795111962;\n transform: rotate(4.75turn);\n }\n}\n",
"component_name": "GalaxyPurpleFalcon85"
},
"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": 5519,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:42.193Z",
"updated_at": "2025-07-31T07:55:42.193Z"
}