ak-loading 加载

SOURCE / HTML

html

<div class="ak-loading"></div>
<div class="ak-loading" style="--ak-loading-color: black"></div>
<div class="ak-loading" style="--ak-loading-color: var(--ak-color-advanced)"></div>

<div class="ak-loading-track" style="--ak-loading-track-width: min(72vw, 28rem)">
  <span class="ak-loading-track__runner" aria-hidden="true"></span>
  <span class="ak-loading-track__label">Loading</span>
</div>

通过 --ak-loading-color 设置加载标记颜色。

ak-loading-track 提供终端启动时使用的线性 Loading 动效；ak-loading-screen 负责全屏背景、品牌区和淡出状态。两者都由 CSS Core 提供，完整主终端只组合这些组件，不维护第二份私有样式。

--ak-loading-track-width：进度轨道宽度
--ak-loading-track-duration：方块往返周期
--ak-loading-screen-background：图片尚未完成时的底色
data-state="ready"：触发全屏 Loading 淡出

终端 Loading

Loading 与主终端分开展示，避免文档访问时被过渡动画遮挡。该示例是唯一的完整 Loading 组合实现。

Tips: 首次加载会同步字体与界面资源，请稍候。

SOURCE / HTML

html

<section
  class="ak-loading-screen"
  data-loading-screen
  data-state="loading"
  role="status"
  aria-label="正在同步终端资源"
>
  <img
    class="ak-loading-screen__backdrop"
    src="https://assets.yunyoujun.cn/ak-ui/assets/img/bg/loading-terminal-v2-201dae3c90d5.webp"
    alt=""
    aria-hidden="true"
  >
  <p class="ak-loading-screen__tip">Tips: 首次加载会同步字体与界面资源，请稍候。</p>
  <div class="ak-loading-screen__identity" aria-hidden="true">
    <span class="ak-loading-screen__brand">
      <strong>AK TACTICAL TERMINAL</strong>
      <small>Medical Operations Interface</small>
    </span>
    <span class="ak-loading-screen__mark">
      <svg class="ak-icon"><use href="#icon-rook"></use></svg>
      <small>AK / UI</small>
    </span>
  </div>
  <div class="ak-loading-screen__progress">
    <div class="ak-loading-track">
      <span class="ak-loading-track__runner" aria-hidden="true"></span>
      <span class="ak-loading-track__label">Loading</span>
    </div>
  </div>
</section>

打开全屏 Loading →

ak-loading 加载 ​

终端 Loading ​

ak-loading 加载

终端 Loading