微件:CodeLoadingUI/SCF

<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;
   font-family: monospace;
 }

 /* 逐行键入动画 */
 .typing {
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   border-right: 2px solid #fff; /* 光标效果 */
   animation: blink-caret 0.75s step-end infinite;
 }

 @keyframes blink-caret {
   from, to { border-color: transparent; }
   50% { border-color: #fff; }
 }

</style>

<script>

 // 确保DOM加载完成后再执行脚本
 document.addEventListener('DOMContentLoaded', function () {
   var progress = 0;
   var progressBar = document.getElementById('progressBar').querySelector('div');
   var codeDisplay = document.getElementById('codeDisplay');

   // 模拟的代码行
   var codeLines = [
     "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"
   ];

   // 逐行显示代码
   function typeLines(index) {
     if (index < codeLines.length) {
       var line = document.createElement('div');
       line.className = 'typing';
       line.textContent = codeLines[index];
       codeDisplay.appendChild(line);

       // 模拟打字效果
       var text = codeLines[index];
       var charIndex = 0;
       var typingInterval = setInterval(function () {
         if (charIndex < text.length) {
           line.textContent = text.substring(0, charIndex + 1);
           charIndex++;
         } else {
           clearInterval(typingInterval);
           line.classList.remove('typing'); // 移除光标效果
           typeLines(index + 1); // 显示下一行
         }
       }, 50); // 每个字符的显示间隔
     }
   }

   // 开始显示代码
   typeLines(0);

   // 模拟10秒加载时间
   var interval = setInterval(function () {
     progress += 1; // 每秒增加1%
     progressBar.style.width = progress + '%';
     if (progress >= 100) {
       clearInterval(interval);
       document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
     }
   }, 200); // 每200毫秒更新一次进度条
 });

</script>