微件:CodeLoadingUI：修订间差异

来自SOKA CAFE
可视化wikitext
 
（未显示同一用户的8个中间版本）
第1行： 第1行：
<!-- CSS 样式 -->
<!-- CSS 样式 -->
<style>
<style>
  :root {
    --background-color: #000;
    --text-color: #fff;
    --loader-color: #3498db;
    --progress-bar-bg: #444;
    --progress-bar-fill: #3498db;
    --code-bg: #222;
    --loader-size: 50px;
    --progress-bar-height: 10px;
    --progress-bar-width: 200px;
    --font-family: monospace;
  }
   /* 全屏覆盖层 */
   /* 全屏覆盖层 */
   #loadingOverlay {
   #loadingOverlay {
第21行： 第8行：
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     background: var(--background-color);
     background: #000;
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
第27行： 第14行：
     flex-direction: column;
     flex-direction: column;
     z-index: 1000;
     z-index: 1000;
     color: var(--text-color);
     color: #fff;
     font-family: var(--font-family);
     font-family: monospace;
   }
   }


第34行： 第21行：
   .loader {
   .loader {
     border: 5px solid #f3f3f3;
     border: 5px solid #f3f3f3;
     border-top: 5px solid var(--loader-color);
     border-top: 5px solid #3498db;
     border-radius: 50%;
     border-radius: 50%;
     width: var(--loader-size);
     width: 50px;
     height: var(--loader-size);
     height: 50px;
     animation: spin 1s linear infinite;
     animation: spin 1s linear infinite;
    will-change: transform;
   }
   }


第49行： 第35行：
   /* 进度条 */
   /* 进度条 */
   #progressBar {
   #progressBar {
     width: var(--progress-bar-width);
     width: 200px;
     height: var(--progress-bar-height);
     height: 10px;
     background: var(--progress-bar-bg);
     background: #444;
     margin-top: 20px;
     margin-top: 20px;
     border-radius: 5px;
     border-radius: 5px;
第60行： 第46行：
     height: 100%;
     height: 100%;
     width: 0;
     width: 0;
     background: var(--progress-bar-fill);
     background: #3498db;
     transition: width 0.5s ease;
     transition: width 0.5s ease;
   }
   }
第67行： 第53行：
   #codeDisplay {
   #codeDisplay {
     margin-top: 20px;
     margin-top: 20px;
     background: var(--code-bg);
     background: #222;
     padding: 10px;
     padding: 10px;
     border-radius: 5px;
     border-radius: 5px;
第74行： 第60行：
     overflow: auto;
     overflow: auto;
     white-space: pre-wrap;
     white-space: pre-wrap;
  }
  /* 响应式设计 */
  @media (max-width: 600px) {
    #codeDisplay {
      width: 95%;
    }
   }
   }
</style>
</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 逻辑 -->
<!-- JavaScript 逻辑 -->
<script>
<script>
   (function() {
   // 确保DOM加载完成后再执行脚本
    // 模拟加载进度
  document.addEventListener('DOMContentLoaded', function () {
     var progress = 0;
     var progress = 0;
     var progressBar = document.getElementById('progressBar').querySelector('div');
     var progressBar = document.getElementById('progressBar').querySelector('div');
     var loadingOverlay = document.getElementById('loadingOverlay');
     var interval = setInterval(function () {
 
    function updateProgress() {
       progress += 10;
       progress += 10;
       progressBar.style.width = progress + '%';
       progressBar.style.width = progress + '%';
      progressBar.setAttribute('aria-valuenow', progress);
       if (progress >= 100) {
       if (progress >= 100) {
         loadingOverlay.style.display = 'none';
         clearInterval(interval);
        loadingOverlay.setAttribute('aria-busy', 'false');
        document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
      } else {
        requestAnimationFrame(updateProgress);
       }
       }
     }
     }, 300);
  });
</script>


    requestAnimationFrame(updateProgress);
<!-- HTML 结构 -->
 
<div id="loadingOverlay">
     // 动态填充代码内容
  <div class="loader"></div>
    var codeDisplay = document.getElementById('codeDisplay');
  <div id="progressBar">
     var code = codeDisplay.getAttribute('data-code');
     <div></div>
 
  </div>
    if (code) {
  <div id="codeDisplay">
      codeDisplay.textContent = code;
     Loading system...
    } else {
   </div>
      codeDisplay.textContent = 'No code provided';
</div>
    }
   })();
</script>

2025年3月2日 (日) 09:34的最新版本

<style> 

 /* 全屏覆盖层 */
 #loadingOverlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   z-index: 1000;
   color: #fff;
   font-family: monospace;
 }

 /* 加载动画 */
 .loader {
   border: 5px solid #f3f3f3;
   border-top: 5px solid #3498db;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }

 /* 进度条 */
 #progressBar {
   width: 200px;
   height: 10px;
   background: #444;
   margin-top: 20px;
   border-radius: 5px;
   overflow: hidden;
 }

 #progressBar div {
   height: 100%;
   width: 0;
   background: #3498db;
   transition: width 0.5s ease;
 }

 /* 模拟代码样式 */
 #codeDisplay {
   margin-top: 20px;
   background: #222;
   padding: 10px;
   border-radius: 5px;
   width: 80%;
   max-width: 600px;
   overflow: auto;
   white-space: pre-wrap;
 }

</style>

<script> 

 // 确保DOM加载完成后再执行脚本
 document.addEventListener('DOMContentLoaded', function () {
   var progress = 0;
   var progressBar = document.getElementById('progressBar').querySelector('div');
   var interval = setInterval(function () {
     progress += 10;
     progressBar.style.width = progress + '%';
     if (progress >= 100) {
       clearInterval(interval);
       document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
     }
   }, 300);
 });

</script> 

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