微件:CodeLoadingUI/SCF：修订间差异

来自SOKA CAFE
可视化wikitext
第13行： 第13行：
     align-items: center;
     align-items: center;
     flex-direction: column;
     flex-direction: column;
     z-index: 1000; /* 确保加载界面在最上层 */
     z-index: 1000;
     color: #fff;
     color: #fff;
     font-family: monospace;
     font-family: monospace;
第61行： 第61行：
     white-space: pre-wrap;
     white-space: pre-wrap;
   }
   }
</style>


   /* 背景图片样式 */
<!-- JavaScript 逻辑 -->
   .Cbackground {
<script>
     position: fixed;
   // 确保DOM加载完成后再执行脚本
     background-size: cover !important;
   document.addEventListener('DOMContentLoaded', function () {
     top: 0;
     var progress = 0;
    width: 100%;
     var progressBar = document.getElementById('progressBar').querySelector('div');
    height: 100%;
     var interval = setInterval(function () {
    z-index: -1; /* 背景图片在底层 */
      progress += 10;
    background-position: center !important;
      progressBar.style.width = progress + '%';
    display: none; /* 初始状态下隐藏背景图片 */
      if (progress >= 100) {
  }
        clearInterval(interval);
 
        document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
  #mw-content-container { background: rgba(255, 255, 255, 0.6); }
      }
   #mw-content, .sidebar-chunk {
    }, 300);
    background: rgba(255, 255, 255, 0.7) !important;
   });
    backdrop-filter: blur(20px);
</script>
  }
</style>


<!-- HTML 结构 -->
<!-- HTML 结构 -->
第108行： 第107行：
   </div>
   </div>
</div>
</div>
<!-- 背景图片容器 -->
<div class="Cbackground" id="Cbackground" data-file="{{filepath:宗教都市祭封面1 V2.PNG}}"></div>
<!-- JavaScript 逻辑 -->
<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'; // 隐藏加载界面
        // 加载背景图片
        var Cbackground = document.getElementById("Cbackground");
        var file = Cbackground.getAttribute("data-file");
        Cbackground.style.background = 'url(' + file + ')';
        Cbackground.style.display = 'block'; // 显示背景图片
        var wrapper = document.getElementById("mw-wrapper");
        if (wrapper) {
          wrapper.appendChild(Cbackground);
        }
      }
    }, 300);
  });
</script>

2025年3月2日 (日) 10:02的版本

<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...

   dir /s /b shukyo_city_festival
   File Not Found

   dir /s /b *shukyo_city_festival
   Finding…

   ┗ admin:File Not Found
   ┗ adult:File Not Found
   ┗ alternative:File Not Found
   ┗ credit:File Not Found
   ┗ declassified:File Not Found
   ┗ fragment:File Not Found
   ┗ system:File Not Found
   ┗ thous:【合作】宗教都市祭 ~ Shukyo City Festival

   >/thous:【合作】宗教都市祭 ~ Shukyo City Festival
取自“http://soka.cafe/index.php?title=微件:CodeLoadingUI/SCF&oldid=2009”