{
  "id": "Nawsome_slimy-tiger-93",
  "name": "slimy-tiger-93",
  "category": "loaders",
  "author": "Nawsome",
  "description": "slimy-tiger-93 组件 (loader, animation)",
  "tags": [
    "loader",
    "animation"
  ],
  "original": {
    "html": "<div class=\"loadingspinner\">\n  <div id=\"square1\"></div>\n  <div id=\"square2\"></div>\n  <div id=\"square3\"></div>\n  <div id=\"square4\"></div>\n  <div id=\"square5\"></div>\n</div>",
    "css": "/* From Uiverse.io by Nawsome - Tags: loader */\n.loadingspinner {\n  --square: 26px;\n  --offset: 30px;\n  --duration: 2.4s;\n  --delay: 0.2s;\n  --timing-function: ease-in-out;\n  --in-duration: 0.4s;\n  --in-delay: 0.1s;\n  --in-timing-function: ease-out;\n  width: calc( 3 * var(--offset) + var(--square));\n  height: calc( 2 * var(--offset) + var(--square));\n  padding: 0px;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: 10px;\n  margin-bottom: 30px;\n  position: relative;\n}\n\n.loadingspinner div {\n  display: inline-block;\n  background: darkorange;\n    /*background: var(--text-color);*/\n    /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/\n  border: none;\n  border-radius: 2px;\n  width: var(--square);\n  height: var(--square);\n  position: absolute;\n  padding: 0px;\n  margin: 0px;\n  font-size: 6pt;\n  color: black;\n}\n\n.loadingspinner #square1 {\n  left: calc( 0 * var(--offset) );\n  top: calc( 0 * var(--offset) );\n  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square2 {\n  left: calc( 0 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,\n              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square3 {\n  left: calc( 1 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square4 {\n  left: calc( 2 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square5 {\n  left: calc( 3 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n@keyframes square1 {\n  0% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  8.333% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes square2 {\n  0% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  8.333% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  16.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  25.00% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  83.33% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  91.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n}\n\n@keyframes square3 {\n  0%,100% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  16.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  25.00% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  33.33% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  41.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  66.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  75.00% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  83.33% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  91.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes square4 {\n  0% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  33.33% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  41.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  50.00% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  58.33% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes square5 {\n  0% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  50.00% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  58.33% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  66.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  75.00% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes squarefadein {\n  0% {\n    transform: scale(0.75);\n    opacity: 0.0;\n  }\n\n  100% {\n    transform: scale(1.0);\n    opacity: 1.0;\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/Nawsome_slimy-tiger-93.html"
  },
  "uniapp": {
    "template": "<view class=\"loadingspinner\"></view>\n  <view id=\"square1\"></view>\n  <view id=\"square2\"></view>\n  <view id=\"square3\"></view>\n  <view id=\"square4\"></view>\n  <view id=\"square5\"></view>\n</div>",
    "script": "export default {\n  name: 'GalaxySlimyTiger93',\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.loadingspinner {\n  --square: 52rpx;\n  --offset: 60rpx;\n  --duration: 2.4s;\n  --delay: 0.2s;\n  --timing-function: ease-in-out;\n  --in-duration: 0.4s;\n  --in-delay: 0.1s;\n  --in-timing-function: ease-out;\n  width: calc( 3 * var(--offset) + var(--square));\n  height: calc( 2 * var(--offset) + var(--square));\n  padding: 0rpx;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: 20rpx;\n  margin-bottom: 60rpx;\n  position: relative;\n}\n\n.loadingspinner div {\n  display: inline-block;\n  background: darkorange;\n    /*background: var(--text-color);*/\n    /*/* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.4);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */*/\n  border: none;\n  border-radius: 4rpx;\n  width: var(--square);\n  height: var(--square);\n  position: absolute;\n  padding: 0rpx;\n  margin: 0rpx;\n  font-size: 6pt;\n  color: black;\n}\n\n.loadingspinner #square1 {\n  left: calc( 0 * var(--offset) );\n  top: calc( 0 * var(--offset) );\n  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square2 {\n  left: calc( 0 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,\n              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square3 {\n  left: calc( 1 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square4 {\n  left: calc( 2 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square5 {\n  left: calc( 3 * var(--offset) );\n  top: calc( 1 * var(--offset) );\n  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,\n               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n@keyframes square1 {\n  0% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  8.333% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes square2 {\n  0% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  8.333% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  16.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  25.00% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  83.33% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  91.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 0 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n}\n\n@keyframes square3 {\n  0%,100% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  16.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  25.00% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  33.33% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  41.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  66.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  75.00% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  83.33% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  91.67% {\n    left: calc( 1 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes square4 {\n  0% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  33.33% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  41.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  50.00% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 2 * var(--offset) );\n  }\n\n  58.33% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes square5 {\n  0% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  50.00% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  58.33% {\n    left: calc( 3 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  66.67% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 0 * var(--offset) );\n  }\n\n  75.00% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n\n  100% {\n    left: calc( 2 * var(--offset) );\n    top: calc( 1 * var(--offset) );\n  }\n}\n\n@keyframes squarefadein {\n  0% {\n    transform: scale(0.75);\n    opacity: 0.0;\n  }\n\n  100% {\n    transform: scale(1.0);\n    opacity: 1.0;\n  }\n}\n",
    "component_name": "GalaxySlimyTiger93"
  },
  "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": [
        "不支持 box-shadow 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 5423,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:39.840Z",
  "updated_at": "2025-07-31T07:55:39.840Z"
}