微件:CodeLoadingUI：修订间差异

来自SOKA CAFE
可视化wikitext
第1行： 第1行：
<!-- CSS 样式 -->
<widget>
<style>
  <title>CodeLoadingUI</title>
   :root {
   <description>Displays a full-screen digital code loading animation with customizable code.</description>
    --background-color: #000;
  <parameters>
    --text-color: #fff;
    <parameter name="code" required="true">The code to display in the loading animation.</parameter>
    --loader-color: #3498db;
    <parameter name="speed" default="1">Animation speed (1 = normal, 2 = fast, 0.5 = slow).</parameter>
    --progress-bar-bg: #444;
    <parameter name="color" default="#00ff00">Color of the code text (hex or CSS color).</parameter>
    --progress-bar-fill: #3498db;
    <parameter name="background" default="#000000">Background color of the loading screen (hex or CSS color).</parameter>
    --code-bg: #222;
  </parameters>
    --loader-size: 50px;
  <content>
    --progress-bar-height: 10px;
    <![CDATA[
    --progress-bar-width: 200px;
    <style>
    --font-family: monospace;
      /* Full-screen styling */
  }
      .code-loading-ui {
 
        position: fixed;
  /* 全屏覆盖层 */
        top: 0;
  #loadingOverlay {
        left: 0;
    position: fixed;
        width: 100%;
    top: 0;
        height: 100%;
    left: 0;
        background-color: {{{background}}};
    width: 100%;
        color: {{{color}}};
    height: 100%;
        font-family: monospace;
    background: var(--background-color);
        font-size: 24px;
    display: flex;
        display: flex;
    justify-content: center;
         align-items: center;
    align-items: center;
         justify-content: center;
    flex-direction: column;
        overflow: hidden;
    z-index: 1000;
         z-index: 9999;
    color: var(--text-color);
    font-family: var(--font-family);
  }
 
  /* 加载动画 */
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--loader-color);
    border-radius: 50%;
    width: var(--loader-size);
    height: var(--loader-size);
    animation: spin 1s linear infinite;
    will-change: transform;
  }
 
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
 
  /* 进度条 */
  #progressBar {
    width: var(--progress-bar-width);
    height: var(--progress-bar-height);
    background: var(--progress-bar-bg);
    margin-top: 20px;
    border-radius: 5px;
    overflow: hidden;
  }
 
  #progressBar div {
    height: 100%;
    width: 0;
    background: var(--progress-bar-fill);
    transition: width 0.5s ease;
  }
 
  /* 模拟代码样式 */
  #codeDisplay {
    margin-top: 20px;
    background: var(--code-bg);
    padding: 10px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
    overflow: auto;
    white-space: pre-wrap;
  }
 
  /* 响应式设计 */
  @media (max-width: 600px) {
    #codeDisplay {
      width: 95%;
    }
  }
</style>
 
<!-- HTML 结构 -->
<div id="loadingOverlay" aria-busy="true" aria-live="polite">
  <div class="loader" aria-hidden="true"></div>
  <div id="progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    <div></div>
  </div>
  <div id="codeDisplay" aria-label="Code Display" data-code="{{{code}}}"></div>
</div>
 
<!-- JavaScript 逻辑 -->
<script>
  (function() {
    // 模拟加载进度
    var progress = 0;
    var progressBar = document.getElementById('progressBar').querySelector('div');
    var loadingOverlay = document.getElementById('loadingOverlay');
 
    function updateProgress() {
      progress += 10;
      progressBar.style.width = progress + '%';
      progressBar.setAttribute('aria-valuenow', progress);
 
      if (progress >= 100) {
         loadingOverlay.style.display = 'none';
         loadingOverlay.setAttribute('aria-busy', 'false');
      } else {
         setTimeout(updateProgress, 300); // 使用 setTimeout 替代 setInterval
       }
       }
    }
      .code-loading-ui .code {
 
        white-space: pre;
    // 启动进度条
        animation: code-loading calc(1s / {{{speed}}}) infinite;
    setTimeout(updateProgress, 300);
      }
 
      @keyframes code-loading {
    // 动态填充代码内容
        0% { opacity: 0.5; }
    var codeDisplay = document.getElementById('codeDisplay');
        50% { opacity: 1; }
    var code = codeDisplay.getAttribute('data-code');
        100% { opacity: 0.5; }
 
      }
     if (code && code.trim() !== '') {
     </style>
       codeDisplay.textContent = code;
    <div class="code-loading-ui">
     } else {
       <div class="code">{{{code}}}</div>
      codeDisplay.textContent = 'No code provided';
     </div>
     }
     ]]>
   })();
   </content>
</script>
</widget>

2025年3月2日 (日) 09:15的版本

<widget> 

 <title>CodeLoadingUI</title>
 <description>Displays a full-screen digital code loading animation with customizable code.</description>
 <parameters>
   <parameter name="code" required="true">The code to display in the loading animation.</parameter>
   <parameter name="speed" default="1">Animation speed (1 = normal, 2 = fast, 0.5 = slow).</parameter>
   <parameter name="color" default="#00ff00">Color of the code text (hex or CSS color).</parameter>
   <parameter name="background" default="#000000">Background color of the loading screen (hex or CSS color).</parameter>
 </parameters>
 <content>
   <![CDATA[
   <style>
     /* Full-screen styling */
     .code-loading-ui {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: {{{background}}};
       color: {{{color}}};
       font-family: monospace;
       font-size: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       z-index: 9999;
     }
     .code-loading-ui .code {
       white-space: pre;
       animation: code-loading calc(1s / {{{speed}}}) infinite;
     }
     @keyframes code-loading {
       0% { opacity: 0.5; }
       50% { opacity: 1; }
       100% { opacity: 0.5; }
     }
   </style>
{{{code}}}
   ]]>
 </content>

</widget>

取自“http://soka.cafe/index.php?title=微件:CodeLoadingUI&oldid=1991”