微件:CodeLoadingUI：修订间差异

来自SOKA CAFE
可视化wikitext
Banmad3n
Banmad3n（留言 | 贡献） （创建页面，内容为“<!-- CSS 样式 --> <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…”）
 
第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 {
第8行： 第21行：
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     background: #000;
     background: var(--background-color);
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
第14行： 第27行：
     flex-direction: column;
     flex-direction: column;
     z-index: 1000;
     z-index: 1000;
     color: #fff;
     color: var(--text-color);
     font-family: monospace;
     font-family: var(--font-family);
   }
   }


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


第35行： 第49行：
   /* 进度条 */
   /* 进度条 */
   #progressBar {
   #progressBar {
     width: 200px;
     width: var(--progress-bar-width);
     height: 10px;
     height: var(--progress-bar-height);
     background: #444;
     background: var(--progress-bar-bg);
     margin-top: 20px;
     margin-top: 20px;
     border-radius: 5px;
     border-radius: 5px;
第46行： 第60行：
     height: 100%;
     height: 100%;
     width: 0;
     width: 0;
     background: #3498db;
     background: var(--progress-bar-fill);
     transition: width 0.5s ease;
     transition: width 0.5s ease;
   }
   }
第53行： 第67行：
   #codeDisplay {
   #codeDisplay {
     margin-top: 20px;
     margin-top: 20px;
     background: #222;
     background: var(--code-bg);
     padding: 10px;
     padding: 10px;
     border-radius: 5px;
     border-radius: 5px;
第60行： 第74行：
     overflow: auto;
     overflow: auto;
     white-space: pre-wrap;
     white-space: pre-wrap;
  }
  /* 响应式设计 */
  @media (max-width: 600px) {
    #codeDisplay {
      width: 95%;
    }
   }
   }
</style>
</style>


<!-- HTML 结构 -->
<!-- HTML 结构 -->
<div id="loadingOverlay">
<div id="loadingOverlay" aria-busy="true" aria-live="polite">
   <div class="loader"></div>
   <div class="loader" aria-hidden="true"></div>
   <div id="progressBar">
   <div id="progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
     <div></div>
     <div></div>
   </div>
   </div>
   <div id="codeDisplay">{{{code}}}</div>
   <div id="codeDisplay" aria-label="Code Display">{{{code}}}</div>
</div>
</div>


<!-- JavaScript 逻辑 -->
<!-- JavaScript 逻辑 -->
<script>
<script>
   // 模拟加载进度
   (function() {
  var progress = 0;
    var progress = 0;
  var progressBar = document.getElementById('progressBar').querySelector('div');
    var progressBar = document.getElementById('progressBar').querySelector('div');
  var interval = setInterval(function () {
    var loadingOverlay = document.getElementById('loadingOverlay');
    progress += 10;
 
    progressBar.style.width = progress + '%';
    function updateProgress() {
    if (progress >= 100) {
      progress += 10;
      clearInterval(interval);
      progressBar.style.width = progress + '%';
      document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
      progressBar.setAttribute('aria-valuenow', progress);
 
      if (progress >= 100) {
        loadingOverlay.style.display = 'none';
        loadingOverlay.setAttribute('aria-busy', 'false');
      } else {
        requestAnimationFrame(updateProgress);
      }
     }
     }
   }, 300);
 
    requestAnimationFrame(updateProgress);
   })();
</script>
</script>

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

<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 {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--background-color);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   z-index: 1000;
   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>

{{{code}}}

<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 {
       requestAnimationFrame(updateProgress);
     }
   }

   requestAnimationFrame(updateProgress);
 })();

</script>

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