{
  "id": "VashonG_hard-sheep-18",
  "name": "hard-sheep-18",
  "category": "loaders",
  "author": "VashonG",
  "description": "hard-sheep-18 组件 (loader, orbit, animation, interactive)",
  "tags": [
    "loader",
    "orbit",
    "animation",
    "interactive"
  ],
  "original": {
    "html": "<div class=\"orbit\">\n  \n  <ul class=\"orbit-wrap\">\n    \n    <li class=\"orbit-center\">\n      <i class=\"orbit-center__icon fa fa-code\"></i>\n    </li>\n\n    <li>\n      <ul class=\"ring-0\">\n        <li><i class=\"orbit-icon fa fa-git\"></i></li>\n        <li><i class=\"orbit-icon fa fa-free-code-camp\"></i></li>\n        <li><i class=\"orbit-icon fa fa-meetup\"></i></li>\n        <li><i class=\"orbit-icon fa fa-codepen\"></i></li>\n      </ul>\n    </li>\n\n    <li>\n      <ul class=\"ring-1\">\n        <li><i class=\"orbit-icon fa fa-podcast\"></i></li>\n        <li><i class=\"orbit-icon fa fa-css3\"></i></li>\n        <li><i class=\"orbit-icon fa fa-html5\"></i></li>\n      </ul>\n    </li>\n    <li>\n      <ul class=\"ring-2\">\n        <li><i class=\"orbit-icon fa fa-windows\"></i></li>\n        <li><i class=\"orbit-icon fa fa-safari\"></i></li>\n        <li><i class=\"orbit-icon fa fa-edge\"></i></li>\n        <li><i class=\"orbit-icon fa fa-linux\"></i></li>\n        <li><i class=\"orbit-icon fa fa-apple\"></i></li>\n        <li><i class=\"orbit-icon fa fa-chrome\"></i></li>\n        <li><i class=\"orbit-icon fa fa-android\"></i></li>\n        <li><i class=\"orbit-icon fa fa-firefox\"></i></li>\n      </ul>\n    </li>\n    <li>\n      <ul class=\"ring-3\">\n        <li><i class=\"orbit-icon fa fa-coffee\"></i></li>\n        <li><i class=\"orbit-icon fa fa-terminal\"></i></li>\n        <li><i class=\"orbit-icon fa fa-heart-o\"></i></li>\n      </ul>\n    </li>\n\n  </ul>\n  \n</div>",
    "css": "/* From Uiverse.io by VashonG - Tags: loader, orbit */\n.orbit {\n  float: left;\n  width: 100%;\n  min-width: 100px;\n  min-height: 100px;\n}\n\n.orbit-icon {\n  width: 1.6em;\n  height: 1.6em;\n  line-height: 1.6em;\n  font-size: 1.2em;\n  border-radius: 50%;\n  background: #ccc;\n  color: #fff;\n  text-align: center;\n  display: block;\n}\n\n.orbit-wrap {\n  height: 40em;\n  list-style: none;\n  font-size: 1.3em;\n}\n\n.orbit-wrap > li {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.orbit-wrap > li:hover ul {\n  border-width: 2px;\n  border-color: #fff;\n}\n\n.orbit-wrap > li:hover ~ li ul {\n  border-color: rgba(255, 255, 255, 0.2);\n}\n\n.orbit-wrap > li:hover ~ li ul li {\n  opacity: 0.4;\n}\n\nul[class^=ring] {\n  transition: all 300ms ease-in-out;\n}\n\nul[class^=ring] li {\n  transition: all 300ms ease-in-out;\n}\n\n.ring-0 {\n  width: 25em;\n  height: 25em;\n  animation: clockwiseRotate 35s linear infinite;\n}\n\n.ring-0 i {\n  animation: counterClockwiseRotate 35s linear infinite;\n}\n\n.ring-0 > *:nth-of-type(1) {\n  transform: rotate(95deg) translate(12.5em) rotate(-95deg);\n}\n\n.ring-0 > *:nth-of-type(2) {\n  transform: rotate(190deg) translate(12.5em) rotate(-190deg);\n}\n\n.ring-0 > *:nth-of-type(3) {\n  transform: rotate(285deg) translate(12.5em) rotate(-285deg);\n}\n\n.ring-0 > *:nth-of-type(4) {\n  transform: rotate(380deg) translate(12.5em) rotate(-380deg);\n}\n\n.ring-1 {\n  width: 20em;\n  height: 20em;\n  animation: clockwiseRotate 30s linear infinite;\n}\n\n.ring-1 i {\n  animation: counterClockwiseRotate 30s linear infinite;\n}\n\n.ring-1 > *:nth-of-type(1) {\n  transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);\n}\n\n.ring-1 > *:nth-of-type(2) {\n  transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);\n}\n\n.ring-1 > *:nth-of-type(3) {\n  transform: rotate(380deg) translate(10em) rotate(-380deg);\n}\n\n.ring-2 {\n  width: 15em;\n  height: 15em;\n  animation: clockwiseRotate 25s linear infinite;\n}\n\n.ring-2 i {\n  animation: counterClockwiseRotate 25s linear infinite;\n}\n\n.ring-2 > *:nth-of-type(1) {\n  transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);\n}\n\n.ring-2 > *:nth-of-type(2) {\n  transform: rotate(95deg) translate(7.5em) rotate(-95deg);\n}\n\n.ring-2 > *:nth-of-type(3) {\n  transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);\n}\n\n.ring-2 > *:nth-of-type(4) {\n  transform: rotate(190deg) translate(7.5em) rotate(-190deg);\n}\n\n.ring-2 > *:nth-of-type(5) {\n  transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);\n}\n\n.ring-2 > *:nth-of-type(6) {\n  transform: rotate(285deg) translate(7.5em) rotate(-285deg);\n}\n\n.ring-2 > *:nth-of-type(7) {\n  transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);\n}\n\n.ring-2 > *:nth-of-type(8) {\n  transform: rotate(380deg) translate(7.5em) rotate(-380deg);\n}\n\n.ring-3 {\n  width: 10em;\n  height: 10em;\n  animation: clockwiseRotate 20s linear infinite;\n}\n\n.ring-3 i {\n  animation: counterClockwiseRotate 20s linear infinite;\n}\n\n.ring-3 > *:nth-of-type(1) {\n  transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);\n}\n\n.ring-3 > *:nth-of-type(2) {\n  transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);\n}\n\n.ring-3 > *:nth-of-type(3) {\n  transform: rotate(380deg) translate(5em) rotate(-380deg);\n}\n\nul[class^=ring] {\n  border: solid 1px rgba(33, 150, 243, 0.8);\n  position: relative;\n  padding: 0;\n  border-radius: 50%;\n  list-style: none;\n  box-sizing: content-box;\n}\n\nul[class^=ring] li {\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 1.6em;\n  height: 1.6em;\n  margin: -0.8em;\n}\n/*\n center;\n */\n.orbit-center {\n  z-index: 5;\n  font-size: 2em;\n  width: 1.8em;\n  height: 1.8em;\n  line-height: 1.8em;\n  text-align: center;\n  background: hotpink;\n  border-radius: 50%;\n}\n\n.orbit-center:hover .orbit-center__icon {\n  transform: rotateZ(0deg);\n}\n\n.orbit-center__icon {\n  transform: rotateZ(-360deg);\n  transition: all 300ms ease-in-out;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul {\n  width: 0;\n  height: 0;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul * {\n  transform: translate(0, 0);\n}\n/* \n animations \n */\n@keyframes clockwiseRotate {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes counterClockwiseRotate {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(-360deg);\n  }\n}\n/* \n icons \n */\n.fa-heart-o {\n  background: #b71c1c;\n  color: white;\n}\n\n.fa-coffee {\n  background: #4CAF50;\n  color: #CDDC39;\n}\n\n.fa-safari {\n  background: white;\n  color: darkslateblue;\n}\n\n.fa-firefox {\n  background: #1565c0;\n  color: #ff8f00;\n}\n\n.fa-chrome {\n  background: #fbc02d;\n  color: #ef6c00;\n}\n\n.fa-edge {\n  background: #03a9f4;\n  color: white;\n}\n\n.fa-android {\n  background: snow;\n  color: limegreen;\n}\n\n.fa-apple {\n  background: #444;\n  color: white;\n}\n\n.fa-linux {\n  background: white;\n  color: #222;\n}\n\n.fa-windows {\n  background: white;\n  color: #03a9f4;\n}\n\n.fa-terminal {\n  background: #222;\n  color: #fff;\n}\n\n.fa-html5 {\n  background: white;\n  color: #e65100;\n}\n\n.fa-css3 {\n  background: white;\n  color: #2196f3;\n}\n\n.fa-git {\n  background: #222;\n  color: white;\n}\n\n.fa-free-code-camp {\n  background: green;\n  color: white;\n}\n\n.fa-meetup {\n  background: red;\n  color: white;\n}\n\n.fa-podcast {\n  background: red;\n  color: white;\n}\n\n.fa-codepen {\n  background: #333;\n  color: white;\n}",
    "file_path": "/mnt/persist/workspace/loaders/VashonG_hard-sheep-18.html"
  },
  "uniapp": {
    "template": "<view class=\"orbit\"></view>\n  \n  <view class=\"orbit-wrap\"></view>\n    \n    <view class=\"orbit-center\"></view>\n      <i class=\"orbit-center__icon fa fa-code\"></i>\n    </li>\n\n    <view></view>\n      <view class=\"ring-0\"></view>\n        <view><i class=\"orbit-icon fa fa-git\"></i></view>\n        <view><i class=\"orbit-icon fa fa-free-code-camp\"></i></view>\n        <view><i class=\"orbit-icon fa fa-meetup\"></i></view>\n        <view><i class=\"orbit-icon fa fa-codepen\"></i></view>\n      </ul>\n    </li>\n\n    <view></view>\n      <view class=\"ring-1\"></view>\n        <view><i class=\"orbit-icon fa fa-podcast\"></i></view>\n        <view><i class=\"orbit-icon fa fa-css3\"></i></view>\n        <view><i class=\"orbit-icon fa fa-html5\"></i></view>\n      </ul>\n    </li>\n    <view></view>\n      <view class=\"ring-2\"></view>\n        <view><i class=\"orbit-icon fa fa-windows\"></i></view>\n        <view><i class=\"orbit-icon fa fa-safari\"></i></view>\n        <view><i class=\"orbit-icon fa fa-edge\"></i></view>\n        <view><i class=\"orbit-icon fa fa-linux\"></i></view>\n        <view><i class=\"orbit-icon fa fa-apple\"></i></view>\n        <view><i class=\"orbit-icon fa fa-chrome\"></i></view>\n        <view><i class=\"orbit-icon fa fa-android\"></i></view>\n        <view><i class=\"orbit-icon fa fa-firefox\"></i></view>\n      </ul>\n    </li>\n    <view></view>\n      <view class=\"ring-3\"></view>\n        <view><i class=\"orbit-icon fa fa-coffee\"></i></view>\n        <view><i class=\"orbit-icon fa fa-terminal\"></i></view>\n        <view><i class=\"orbit-icon fa fa-heart-o\"></i></view>\n      </ul>\n    </li>\n\n  </ul>\n  \n</div>",
    "script": "export default {\n  name: 'GalaxyHardSheep18',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by VashonG - Tags: loader, orbit */\n.orbit {\n  float: left;\n  width: 100%;\n  min-width: 200rpx;\n  min-height: 200rpx;\n}\n\n.orbit-icon {\n  width: 1.6em;\n  height: 1.6em;\n  line-height: 1.6em;\n  font-size: 1.2em;\n  border-radius: 50%;\n  background: #ccc;\n  color: #fff;\n  text-align: center;\n  display: block;\n}\n\n.orbit-wrap {\n  height: 40em;\n  list-style: none;\n  font-size: 1.3em;\n}\n\n.orbit-wrap > li {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.orbit-wrap > li:hover ul {\n  border-width: 4rpx;\n  border-color: #fff;\n}\n\n.orbit-wrap > li:hover ~ li ul {\n  border-color: rgba(255, 255, 255, 0.2);\n}\n\n.orbit-wrap > li:hover ~ li ul li {\n  opacity: 0.4;\n}\n\nul[class^=ring] {\n  transition: all 300ms ease-in-out;\n}\n\nul[class^=ring] li {\n  transition: all 300ms ease-in-out;\n}\n\n.ring-0 {\n  width: 25em;\n  height: 25em;\n  animation: clockwiseRotate 35s linear infinite;\n}\n\n.ring-0 i {\n  animation: counterClockwiseRotate 35s linear infinite;\n}\n\n.ring-0 > *:nth-of-type(1) {\n  transform: rotate(95deg) translate(12.5em) rotate(-95deg);\n}\n\n.ring-0 > *:nth-of-type(2) {\n  transform: rotate(190deg) translate(12.5em) rotate(-190deg);\n}\n\n.ring-0 > *:nth-of-type(3) {\n  transform: rotate(285deg) translate(12.5em) rotate(-285deg);\n}\n\n.ring-0 > *:nth-of-type(4) {\n  transform: rotate(380deg) translate(12.5em) rotate(-380deg);\n}\n\n.ring-1 {\n  width: 20em;\n  height: 20em;\n  animation: clockwiseRotate 30s linear infinite;\n}\n\n.ring-1 i {\n  animation: counterClockwiseRotate 30s linear infinite;\n}\n\n.ring-1 > *:nth-of-type(1) {\n  transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);\n}\n\n.ring-1 > *:nth-of-type(2) {\n  transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);\n}\n\n.ring-1 > *:nth-of-type(3) {\n  transform: rotate(380deg) translate(10em) rotate(-380deg);\n}\n\n.ring-2 {\n  width: 15em;\n  height: 15em;\n  animation: clockwiseRotate 25s linear infinite;\n}\n\n.ring-2 i {\n  animation: counterClockwiseRotate 25s linear infinite;\n}\n\n.ring-2 > *:nth-of-type(1) {\n  transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);\n}\n\n.ring-2 > *:nth-of-type(2) {\n  transform: rotate(95deg) translate(7.5em) rotate(-95deg);\n}\n\n.ring-2 > *:nth-of-type(3) {\n  transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);\n}\n\n.ring-2 > *:nth-of-type(4) {\n  transform: rotate(190deg) translate(7.5em) rotate(-190deg);\n}\n\n.ring-2 > *:nth-of-type(5) {\n  transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);\n}\n\n.ring-2 > *:nth-of-type(6) {\n  transform: rotate(285deg) translate(7.5em) rotate(-285deg);\n}\n\n.ring-2 > *:nth-of-type(7) {\n  transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);\n}\n\n.ring-2 > *:nth-of-type(8) {\n  transform: rotate(380deg) translate(7.5em) rotate(-380deg);\n}\n\n.ring-3 {\n  width: 10em;\n  height: 10em;\n  animation: clockwiseRotate 20s linear infinite;\n}\n\n.ring-3 i {\n  animation: counterClockwiseRotate 20s linear infinite;\n}\n\n.ring-3 > *:nth-of-type(1) {\n  transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);\n}\n\n.ring-3 > *:nth-of-type(2) {\n  transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);\n}\n\n.ring-3 > *:nth-of-type(3) {\n  transform: rotate(380deg) translate(5em) rotate(-380deg);\n}\n\nul[class^=ring] {\n  border: solid 2rpx rgba(33, 150, 243, 0.8);\n  position: relative;\n  padding: 0;\n  border-radius: 50%;\n  list-style: none;\n  box-sizing: content-box;\n}\n\nul[class^=ring] li {\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 1.6em;\n  height: 1.6em;\n  margin: -0.8em;\n}\n/*\n center;\n */\n.orbit-center {\n  z-index: 5;\n  font-size: 2em;\n  width: 1.8em;\n  height: 1.8em;\n  line-height: 1.8em;\n  text-align: center;\n  background: hotpink;\n  border-radius: 50%;\n}\n\n.orbit-center:hover .orbit-center__icon {\n  transform: rotateZ(0deg);\n}\n\n.orbit-center__icon {\n  transform: rotateZ(-360deg);\n  transition: all 300ms ease-in-out;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul {\n  width: 0;\n  height: 0;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul * {\n  transform: translate(0, 0);\n}\n/* \n animations \n */\n@keyframes clockwiseRotate {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes counterClockwiseRotate {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(-360deg);\n  }\n}\n/* \n icons \n */\n.fa-heart-o {\n  background: #b71c1c;\n  color: white;\n}\n\n.fa-coffee {\n  background: #4CAF50;\n  color: #CDDC39;\n}\n\n.fa-safari {\n  background: white;\n  color: darkslateblue;\n}\n\n.fa-firefox {\n  background: #1565c0;\n  color: #ff8f00;\n}\n\n.fa-chrome {\n  background: #fbc02d;\n  color: #ef6c00;\n}\n\n.fa-edge {\n  background: #03a9f4;\n  color: white;\n}\n\n.fa-android {\n  background: snow;\n  color: limegreen;\n}\n\n.fa-apple {\n  background: #444;\n  color: white;\n}\n\n.fa-linux {\n  background: white;\n  color: #222;\n}\n\n.fa-windows {\n  background: white;\n  color: #03a9f4;\n}\n\n.fa-terminal {\n  background: #222;\n  color: #fff;\n}\n\n.fa-html5 {\n  background: white;\n  color: #e65100;\n}\n\n.fa-css3 {\n  background: white;\n  color: #2196f3;\n}\n\n.fa-git {\n  background: #222;\n  color: white;\n}\n\n.fa-free-code-camp {\n  background: green;\n  color: white;\n}\n\n.fa-meetup {\n  background: red;\n  color: white;\n}\n\n.fa-podcast {\n  background: red;\n  color: white;\n}\n\n.fa-codepen {\n  background: #333;\n  color: white;\n}\n\n\n\n",
    "component_name": "GalaxyHardSheep18"
  },
  "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": 6795,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:40.734Z",
  "updated_at": "2025-07-31T07:55:40.734Z"
}