{
  "id": "jeremyssocial_curvy-walrus-79",
  "name": "curvy-walrus-79",
  "category": "loaders",
  "author": "jeremyssocial",
  "description": "curvy-walrus-79 组件 (animation, green, black, loader, animated, css effect, cool card, loading animation, gradient)",
  "tags": [
    "animation",
    "green",
    "black",
    "loader",
    "animated",
    "css effect",
    "cool card",
    "loading animation",
    "gradient"
  ],
  "original": {
    "html": "<div class=\"hacker-loader\">\n  <div class=\"loader-text\">\n    <span data-text=\"Initializing...\" class=\"text-glitch\">Initializing...</span>\n  </div>\n  <div class=\"loader-bar\">\n    <div class=\"bar-fill\"></div>\n    <div class=\"bar-glitch\"></div>\n  </div>\n  <div class=\"particles\">\n    <div class=\"particle\"></div>\n    <div class=\"particle\"></div>\n    <div class=\"particle\"></div>\n    <div class=\"particle\"></div>\n    <div class=\"particle\"></div>\n  </div>\n</div>",
    "css": "/* From Uiverse.io by jeremyssocial  - Tags: animation, green, black, loader, animated, css effect, cool card, loading animation */\n.hacker-loader {\n  position: relative;\n  width: 24em;\n  height: 6em;\n  background-color: #0a0a0a;\n  border: 0.2em solid #00ff00;\n  border-radius: 0.5em;\n  padding: 1em;\n  overflow: hidden;\n  box-shadow: 0 0 1em rgba(0, 255, 0, 0.3);\n}\n\n.loader-text {\n  text-align: center;\n  margin-bottom: 1em;\n}\n\n.text-glitch {\n  color: #00ff00;\n  font-family: monospace;\n  font-size: 1.5em;\n  position: relative;\n  display: inline-block;\n}\n\n.text-glitch::before,\n.text-glitch::after {\n  content: attr(data-text);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #0a0a0a;\n  clip: rect(0, 0, 0, 0);\n}\n\n.text-glitch::before {\n  left: -0.1em;\n  text-shadow: 0.1em 0 #ff00ff;\n  animation: glitch-effect 3s infinite linear alternate-reverse;\n}\n\n.text-glitch::after {\n  left: 0.1em;\n  text-shadow: -0.1em 0 #00ffff;\n  animation: glitch-effect 2s infinite linear alternate-reverse;\n}\n\n.loader-bar {\n  width: 100%;\n  height: 0.5em;\n  background-color: #003300;\n  border-radius: 0.25em;\n  position: relative;\n  overflow: hidden;\n}\n\n.bar-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: #00ff00;\n  animation: bar-fill-animation 2s infinite ease-in-out;\n}\n\n.bar-glitch {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    45deg,\n    transparent,\n    rgba(0, 255, 0, 0.2),\n    transparent\n  );\n  background-size: 200% 200%;\n  animation: bar-glitch-animation 2s infinite linear;\n}\n\n.particles {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.particle {\n  position: absolute;\n  width: 0.2em;\n  height: 0.2em;\n  background-color: #00ff00;\n  border-radius: 50%;\n  opacity: 0;\n  animation: particle-animation 2s infinite linear;\n}\n\n.particle:nth-child(1) {\n  top: 10%;\n  left: 10%;\n  animation-delay: 0s;\n}\n\n.particle:nth-child(2) {\n  top: 30%;\n  left: 60%;\n  animation-delay: 0.5s;\n}\n\n.particle:nth-child(3) {\n  top: 70%;\n  left: 30%;\n  animation-delay: 1s;\n}\n\n.particle:nth-child(4) {\n  top: 90%;\n  left: 90%;\n  animation-delay: 1.5s;\n}\n\n.particle:nth-child(5) {\n  top: 50%;\n  left: 50%;\n  animation-delay: 2s;\n}\n\n@keyframes glitch-effect {\n  0% {\n    clip: rect(42px, 9999px, 44px, 0);\n  }\n  5% {\n    clip: rect(12px, 9999px, 59px, 0);\n  }\n  10% {\n    clip: rect(48px, 9999px, 29px, 0);\n  }\n  15.0% {\n    clip: rect(42px, 9999px, 73px, 0);\n  }\n  20% {\n    clip: rect(63px, 9999px, 27px, 0);\n  }\n  25% {\n    clip: rect(34px, 9999px, 55px, 0);\n  }\n  30.0% {\n    clip: rect(86px, 9999px, 73px, 0);\n  }\n  35% {\n    clip: rect(20px, 9999px, 20px, 0);\n  }\n  40% {\n    clip: rect(26px, 9999px, 60px, 0);\n  }\n  45% {\n    clip: rect(25px, 9999px, 66px, 0);\n  }\n  50% {\n    clip: rect(57px, 9999px, 98px, 0);\n  }\n  55.0% {\n    clip: rect(5px, 9999px, 46px, 0);\n  }\n  60.0% {\n    clip: rect(82px, 9999px, 31px, 0);\n  }\n  65% {\n    clip: rect(54px, 9999px, 27px, 0);\n  }\n  70% {\n    clip: rect(28px, 9999px, 99px, 0);\n  }\n  75% {\n    clip: rect(45px, 9999px, 69px, 0);\n  }\n  80% {\n    clip: rect(23px, 9999px, 85px, 0);\n  }\n  85.0% {\n    clip: rect(54px, 9999px, 84px, 0);\n  }\n  90% {\n    clip: rect(45px, 9999px, 47px, 0);\n  }\n  95% {\n    clip: rect(37px, 9999px, 20px, 0);\n  }\n  100% {\n    clip: rect(4px, 9999px, 91px, 0);\n  }\n}\n\n@keyframes bar-fill-animation {\n  0%,\n  100% {\n    width: 0;\n  }\n  50% {\n    width: 100%;\n  }\n}\n\n@keyframes bar-glitch-animation {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n@keyframes particle-animation {\n  0% {\n    opacity: 0;\n    transform: translate(0, 0);\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: translate(2em, 2em);\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/jeremyssocial_curvy-walrus-79.html"
  },
  "uniapp": {
    "template": "<view class=\"hacker-loader\"></view>\n  <view class=\"loader-text\"></view>\n    <text data-text=\"Initializing...\" class=\"text-glitch\">Initializing...</text>\n  </div>\n  <view class=\"loader-bar\"></view>\n    <view class=\"bar-fill\"></view>\n    <view class=\"bar-glitch\"></view>\n  </div>\n  <view class=\"particles\"></view>\n    <view class=\"particle\"></view>\n    <view class=\"particle\"></view>\n    <view class=\"particle\"></view>\n    <view class=\"particle\"></view>\n    <view class=\"particle\"></view>\n  </div>\n</div>",
    "script": "export default {\n  name: 'GalaxyCurvyWalrus79',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by jeremyssocial  - Tags: animation, green, black, loader, animated, css effect, cool card, loading animation */\n.hacker-loader {\n  position: relative;\n  width: 24em;\n  height: 6em;\n  background-color: #0a0a0a;\n  border: 0.2em solid #00ff00;\n  border-radius: 0.5em;\n  padding: 1em;\n  overflow: hidden;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 1em rgba(0, 255, 0, 0.3);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n}\n\n.loader-text {\n  text-align: center;\n  margin-bottom: 1em;\n}\n\n.text-glitch {\n  color: #00ff00;\n  font-family: monospace;\n  font-size: 1.5em;\n  position: relative;\n  display: inline-block;\n}\n\n.text-glitch::before,\n.text-glitch::after {\n  content: attr(data-text);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #0a0a0a;\n  clip: rect(0, 0, 0, 0);\n}\n\n.text-glitch::before {\n  left: -0.1em;\n  /* #ifdef H5 */\n  text-shadow: 0.1em 0 #ff00ff;\n  /* #endif */\n  animation: glitch-effect 3s infinite linear alternate-reverse;\n}\n\n.text-glitch::after {\n  left: 0.1em;\n  /* #ifdef H5 */\n  text-shadow: -0.1em 0 #00ffff;\n  /* #endif */\n  animation: glitch-effect 2s infinite linear alternate-reverse;\n}\n\n.loader-bar {\n  width: 100%;\n  height: 0.5em;\n  background-color: #003300;\n  border-radius: 0.25em;\n  position: relative;\n  overflow: hidden;\n}\n\n.bar-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: #00ff00;\n  animation: bar-fill-animation 2s infinite ease-in-out;\n}\n\n.bar-glitch {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    45deg,\n    transparent,\n    rgba(0, 255, 0, 0.2),\n    transparent\n  );\n  background-size: 200% 200%;\n  animation: bar-glitch-animation 2s infinite linear;\n}\n\n.particles {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.particle {\n  position: absolute;\n  width: 0.2em;\n  height: 0.2em;\n  background-color: #00ff00;\n  border-radius: 50%;\n  opacity: 0;\n  animation: particle-animation 2s infinite linear;\n}\n\n.particle:nth-child(1) {\n  top: 10%;\n  left: 10%;\n  animation-delay: 0s;\n}\n\n.particle:nth-child(2) {\n  top: 30%;\n  left: 60%;\n  animation-delay: 0.5s;\n}\n\n.particle:nth-child(3) {\n  top: 70%;\n  left: 30%;\n  animation-delay: 1s;\n}\n\n.particle:nth-child(4) {\n  top: 90%;\n  left: 90%;\n  animation-delay: 1.5s;\n}\n\n.particle:nth-child(5) {\n  top: 50%;\n  left: 50%;\n  animation-delay: 2s;\n}\n\n@keyframes glitch-effect {\n  0% {\n    clip: rect(84rpx, 19998rpx, 88rpx, 0);\n  }\n  5% {\n    clip: rect(24rpx, 19998rpx, 118rpx, 0);\n  }\n  10% {\n    clip: rect(96rpx, 19998rpx, 58rpx, 0);\n  }\n  15.0% {\n    clip: rect(84rpx, 19998rpx, 146rpx, 0);\n  }\n  20% {\n    clip: rect(126rpx, 19998rpx, 54rpx, 0);\n  }\n  25% {\n    clip: rect(68rpx, 19998rpx, 110rpx, 0);\n  }\n  30.0% {\n    clip: rect(172rpx, 19998rpx, 146rpx, 0);\n  }\n  35% {\n    clip: rect(40rpx, 19998rpx, 40rpx, 0);\n  }\n  40% {\n    clip: rect(52rpx, 19998rpx, 120rpx, 0);\n  }\n  45% {\n    clip: rect(50rpx, 19998rpx, 132rpx, 0);\n  }\n  50% {\n    clip: rect(114rpx, 19998rpx, 196rpx, 0);\n  }\n  55.0% {\n    clip: rect(10rpx, 19998rpx, 92rpx, 0);\n  }\n  60.0% {\n    clip: rect(164rpx, 19998rpx, 62rpx, 0);\n  }\n  65% {\n    clip: rect(108rpx, 19998rpx, 54rpx, 0);\n  }\n  70% {\n    clip: rect(56rpx, 19998rpx, 198rpx, 0);\n  }\n  75% {\n    clip: rect(90rpx, 19998rpx, 138rpx, 0);\n  }\n  80% {\n    clip: rect(46rpx, 19998rpx, 170rpx, 0);\n  }\n  85.0% {\n    clip: rect(108rpx, 19998rpx, 168rpx, 0);\n  }\n  90% {\n    clip: rect(90rpx, 19998rpx, 94rpx, 0);\n  }\n  95% {\n    clip: rect(74rpx, 19998rpx, 40rpx, 0);\n  }\n  100% {\n    clip: rect(8rpx, 19998rpx, 182rpx, 0);\n  }\n}\n\n@keyframes bar-fill-animation {\n  0%,\n  100% {\n    width: 0;\n  }\n  50% {\n    width: 100%;\n  }\n}\n\n@keyframes bar-glitch-animation {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n@keyframes particle-animation {\n  0% {\n    opacity: 0;\n    transform: translate(0, 0);\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: translate(2em, 2em);\n  }\n}\n\n",
    "component_name": "GalaxyCurvyWalrus79"
  },
  "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 属性",
        "不支持 text-shadow 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 text-shadow 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 4303,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:42.245Z",
  "updated_at": "2025-07-31T07:55:42.245Z"
}