微件:CodeLoadingUI

来自SOKA CAFE
こばと留言 | 贡献2025年3月2日 (日) 09:16的版本
 <title>CodeLoadingUI</title>
 <description>Displays a full-screen digital code loading animation with customizable code.</description>
 <parameters>
   <parameter name="code" required="true">The code to display in the loading animation.</parameter>
   <parameter name="speed" default="1">Animation speed (1 = normal, 2 = fast, 0.5 = slow).</parameter>
   <parameter name="color" default="#00ff00">Color of the code text (hex or CSS color).</parameter>
   <parameter name="background" default="#000000">Background color of the loading screen (hex or CSS color).</parameter>
 </parameters>
 <content>
   <![CDATA[
   <style>
     /* Full-screen styling */
     .code-loading-ui {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: {{{background}}};
       color: {{{color}}};
       font-family: monospace;
       font-size: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       z-index: 9999;
     }
     .code-loading-ui .code {
       white-space: pre;
       animation: code-loading calc(1s / {{{speed}}}) infinite;
     }
     @keyframes code-loading {
       0% { opacity: 0.5; }
       50% { opacity: 1; }
       100% { opacity: 0.5; }
     }
   </style>
{{{code}}}
   ]]>
 </content>