微件:CodeLoadingUI

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

<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);

   // 动态填充代码内容
   var codeDisplay = document.getElementById('codeDisplay');
   var code = codeDisplay.getAttribute('data-code');

   if (code) {
     codeDisplay.textContent = code;
   } else {
     codeDisplay.textContent = 'No code provided';
   }
 })();

</script>