{
  "id": "Nawsome_tender-swan-29",
  "name": "tender-swan-29",
  "category": "loaders",
  "author": "Nawsome",
  "description": "tender-swan-29 组件 (loader, animation)",
  "tags": [
    "loader",
    "animation"
  ],
  "original": {
    "html": "<div class=\"socket\">\n\t\t\t<div class=\"gel center-gel\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c1 r1\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c2 r1\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c3 r1\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c4 r1\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c5 r1\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c6 r1\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t\n\t\t\t<div class=\"gel c7 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t\n\t\t\t<div class=\"gel c8 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c9 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c10 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c11 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c12 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c13 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c14 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c15 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c16 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c17 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c18 r2\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c19 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c20 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c21 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c22 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c23 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c24 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c25 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c26 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c28 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c29 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c30 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c31 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c32 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c33 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c34 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c35 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c36 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"gel c37 r3\">\n\t\t\t\t<div class=\"hex-brick h1\"></div>\n\t\t\t\t<div class=\"hex-brick h2\"></div>\n\t\t\t\t<div class=\"hex-brick h3\"></div>\n\t\t\t</div>\n\t\t\t\n\t\t</div>",
    "css": "/* From Uiverse.io by Nawsome - Tags: loader */\n.socket {\n  width: 200px;\n  height: 200px;\n  position: absolute;\n  left: 50%;\n  margin-left: -100px;\n  top: 50%;\n  margin-top: -100px;\n}\n\n.hex-brick {\n  background: #000000;\n  width: 30px;\n  height: 17px;\n  position: absolute;\n  top: 5px;\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n}\n\n.h2 {\n  transform: rotate(60deg);\n  -webkit-transform: rotate(60deg);\n}\n\n.h3 {\n  transform: rotate(-60deg);\n  -webkit-transform: rotate(-60deg);\n}\n\n.gel {\n  height: 30px;\n  width: 30px;\n  transition: all .3s;\n  -webkit-transition: all .3s;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.center-gel {\n  margin-left: -15px;\n  margin-top: -15px;\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n}\n\n.c1 {\n  margin-left: -47px;\n  margin-top: -15px;\n}\n\n.c2 {\n  margin-left: -31px;\n  margin-top: -43px;\n}\n\n.c3 {\n  margin-left: 1px;\n  margin-top: -43px;\n}\n\n.c4 {\n  margin-left: 17px;\n  margin-top: -15px;\n}\n\n.c5 {\n  margin-left: -31px;\n  margin-top: 13px;\n}\n\n.c6 {\n  margin-left: 1px;\n  margin-top: 13px;\n}\n\n.c7 {\n  margin-left: -63px;\n  margin-top: -43px;\n}\n\n.c8 {\n  margin-left: 33px;\n  margin-top: -43px;\n}\n\n.c9 {\n  margin-left: -15px;\n  margin-top: 41px;\n}\n\n.c10 {\n  margin-left: -63px;\n  margin-top: 13px;\n}\n\n.c11 {\n  margin-left: 33px;\n  margin-top: 13px;\n}\n\n.c12 {\n  margin-left: -15px;\n  margin-top: -71px;\n}\n\n.c13 {\n  margin-left: -47px;\n  margin-top: -71px;\n}\n\n.c14 {\n  margin-left: 17px;\n  margin-top: -71px;\n}\n\n.c15 {\n  margin-left: -47px;\n  margin-top: 41px;\n}\n\n.c16 {\n  margin-left: 17px;\n  margin-top: 41px;\n}\n\n.c17 {\n  margin-left: -79px;\n  margin-top: -15px;\n}\n\n.c18 {\n  margin-left: 49px;\n  margin-top: -15px;\n}\n\n.c19 {\n  margin-left: -63px;\n  margin-top: -99px;\n}\n\n.c20 {\n  margin-left: 33px;\n  margin-top: -99px;\n}\n\n.c21 {\n  margin-left: 1px;\n  margin-top: -99px;\n}\n\n.c22 {\n  margin-left: -31px;\n  margin-top: -99px;\n}\n\n.c23 {\n  margin-left: -63px;\n  margin-top: 69px;\n}\n\n.c24 {\n  margin-left: 33px;\n  margin-top: 69px;\n}\n\n.c25 {\n  margin-left: 1px;\n  margin-top: 69px;\n}\n\n.c26 {\n  margin-left: -31px;\n  margin-top: 69px;\n}\n\n.c27 {\n  margin-left: -79px;\n  margin-top: -15px;\n}\n\n.c28 {\n  margin-left: -95px;\n  margin-top: -43px;\n}\n\n.c29 {\n  margin-left: -95px;\n  margin-top: 13px;\n}\n\n.c30 {\n  margin-left: 49px;\n  margin-top: 41px;\n}\n\n.c31 {\n  margin-left: -79px;\n  margin-top: -71px;\n}\n\n.c32 {\n  margin-left: -111px;\n  margin-top: -15px;\n}\n\n.c33 {\n  margin-left: 65px;\n  margin-top: -43px;\n}\n\n.c34 {\n  margin-left: 65px;\n  margin-top: 13px;\n}\n\n.c35 {\n  margin-left: -79px;\n  margin-top: 41px;\n}\n\n.c36 {\n  margin-left: 49px;\n  margin-top: -71px;\n}\n\n.c37 {\n  margin-left: 81px;\n  margin-top: -15px;\n}\n\n.r1 {\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .2s;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .2s;\n}\n\n.r2 {\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .4s;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .4s;\n}\n\n.r3 {\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .6s;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .6s;\n}\n\n.r1 > .hex-brick {\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .2s;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .2s;\n}\n\n.r2 > .hex-brick {\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .4s;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .4s;\n}\n\n.r3 > .hex-brick {\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .6s;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .6s;\n}\n\n@keyframes pulse00 {\n  0% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.01);\n    transform: scale(0.01);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n\n@keyframes fade00 {\n  0% {\n    background: #252525;\n  }\n\n  50% {\n    background: #000000;\n  }\n\n  100% {\n    background: #353535;\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/Nawsome_tender-swan-29.html"
  },
  "uniapp": {
    "template": "<view class=\"socket\"></view>\n\t\t\t<view class=\"gel center-gel\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c1 r1\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c2 r1\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c3 r1\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c4 r1\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c5 r1\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c6 r1\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t\n\t\t\t<view class=\"gel c7 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t\n\t\t\t<view class=\"gel c8 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c9 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c10 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c11 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c12 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c13 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c14 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c15 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c16 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c17 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c18 r2\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c19 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c20 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c21 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c22 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c23 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c24 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c25 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c26 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c28 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c29 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c30 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c31 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c32 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c33 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c34 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c35 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c36 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t<view class=\"gel c37 r3\"></view>\n\t\t\t\t<view class=\"hex-brick h1\"></view>\n\t\t\t\t<view class=\"hex-brick h2\"></view>\n\t\t\t\t<view class=\"hex-brick h3\"></view>\n\t\t\t</div>\n\t\t\t\n\t\t</div>",
    "script": "export default {\n  name: 'GalaxyTenderSwan29',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by Nawsome - Tags: loader */\n.socket {\n  width: 400rpx;\n  height: 400rpx;\n  position: absolute;\n  left: 50%;\n  margin-left: -200rpx;\n  top: 50%;\n  margin-top: -200rpx;\n}\n\n.hex-brick {\n  background: #000000;\n  width: 60rpx;\n  height: 34rpx;\n  position: absolute;\n  top: 10rpx;\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n}\n\n.h2 {\n  transform: rotate(60deg);\n  -webkit-transform: rotate(60deg);\n}\n\n.h3 {\n  transform: rotate(-60deg);\n  -webkit-transform: rotate(-60deg);\n}\n\n.gel {\n  height: 60rpx;\n  width: 60rpx;\n  transition: all .3s;\n  -webkit-transition: all .3s;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.center-gel {\n  margin-left: -30rpx;\n  margin-top: -30rpx;\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n}\n\n.c1 {\n  margin-left: -94rpx;\n  margin-top: -30rpx;\n}\n\n.c2 {\n  margin-left: -62rpx;\n  margin-top: -86rpx;\n}\n\n.c3 {\n  margin-left: 2rpx;\n  margin-top: -86rpx;\n}\n\n.c4 {\n  margin-left: 34rpx;\n  margin-top: -30rpx;\n}\n\n.c5 {\n  margin-left: -62rpx;\n  margin-top: 26rpx;\n}\n\n.c6 {\n  margin-left: 2rpx;\n  margin-top: 26rpx;\n}\n\n.c7 {\n  margin-left: -126rpx;\n  margin-top: -86rpx;\n}\n\n.c8 {\n  margin-left: 66rpx;\n  margin-top: -86rpx;\n}\n\n.c9 {\n  margin-left: -30rpx;\n  margin-top: 82rpx;\n}\n\n.c10 {\n  margin-left: -126rpx;\n  margin-top: 26rpx;\n}\n\n.c11 {\n  margin-left: 66rpx;\n  margin-top: 26rpx;\n}\n\n.c12 {\n  margin-left: -30rpx;\n  margin-top: -142rpx;\n}\n\n.c13 {\n  margin-left: -94rpx;\n  margin-top: -142rpx;\n}\n\n.c14 {\n  margin-left: 34rpx;\n  margin-top: -142rpx;\n}\n\n.c15 {\n  margin-left: -94rpx;\n  margin-top: 82rpx;\n}\n\n.c16 {\n  margin-left: 34rpx;\n  margin-top: 82rpx;\n}\n\n.c17 {\n  margin-left: -158rpx;\n  margin-top: -30rpx;\n}\n\n.c18 {\n  margin-left: 98rpx;\n  margin-top: -30rpx;\n}\n\n.c19 {\n  margin-left: -126rpx;\n  margin-top: -198rpx;\n}\n\n.c20 {\n  margin-left: 66rpx;\n  margin-top: -198rpx;\n}\n\n.c21 {\n  margin-left: 2rpx;\n  margin-top: -198rpx;\n}\n\n.c22 {\n  margin-left: -62rpx;\n  margin-top: -198rpx;\n}\n\n.c23 {\n  margin-left: -126rpx;\n  margin-top: 138rpx;\n}\n\n.c24 {\n  margin-left: 66rpx;\n  margin-top: 138rpx;\n}\n\n.c25 {\n  margin-left: 2rpx;\n  margin-top: 138rpx;\n}\n\n.c26 {\n  margin-left: -62rpx;\n  margin-top: 138rpx;\n}\n\n.c27 {\n  margin-left: -158rpx;\n  margin-top: -30rpx;\n}\n\n.c28 {\n  margin-left: -190rpx;\n  margin-top: -86rpx;\n}\n\n.c29 {\n  margin-left: -190rpx;\n  margin-top: 26rpx;\n}\n\n.c30 {\n  margin-left: 98rpx;\n  margin-top: 82rpx;\n}\n\n.c31 {\n  margin-left: -158rpx;\n  margin-top: -142rpx;\n}\n\n.c32 {\n  margin-left: -222rpx;\n  margin-top: -30rpx;\n}\n\n.c33 {\n  margin-left: 130rpx;\n  margin-top: -86rpx;\n}\n\n.c34 {\n  margin-left: 130rpx;\n  margin-top: 26rpx;\n}\n\n.c35 {\n  margin-left: -158rpx;\n  margin-top: 82rpx;\n}\n\n.c36 {\n  margin-left: 98rpx;\n  margin-top: -142rpx;\n}\n\n.c37 {\n  margin-left: 162rpx;\n  margin-top: -30rpx;\n}\n\n.r1 {\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .2s;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .2s;\n}\n\n.r2 {\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .4s;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .4s;\n}\n\n.r3 {\n  animation-name: pulse00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .6s;\n  -webkit-animation-name: pulse00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .6s;\n}\n\n.r1 > .hex-brick {\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .2s;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .2s;\n}\n\n.r2 > .hex-brick {\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .4s;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .4s;\n}\n\n.r3 > .hex-brick {\n  animation-name: fade00;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  animation-delay: .6s;\n  -webkit-animation-name: fade00;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-delay: .6s;\n}\n\n@keyframes pulse00 {\n  0% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.01);\n    transform: scale(0.01);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n\n@keyframes fade00 {\n  0% {\n    background: #252525;\n  }\n\n  50% {\n    background: #000000;\n  }\n\n  100% {\n    background: #353535;\n  }\n}\n\n",
    "component_name": "GalaxyTenderSwan29"
  },
  "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": 10574,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:39.866Z",
  "updated_at": "2025-07-31T07:55:39.866Z"
}