進度條

此範例展示如何實作平滑滾動的進度條。

我們從一個初始狀態開始，其中包含一個按鈕，該按鈕發出一個 POST 請求到 /start 來開始作業

<div hx-target="this" hx-swap="outerHTML">
  <h3>Start Progress</h3>
  <button class="btn primary" hx-post="/start">
            Start Job
  </button>
</div>

然後這個 div 會被替換為一個新的 div，其中包含狀態和一個每 600 毫秒重新載入自己的進度條

<div hx-trigger="done" hx-get="/job" hx-swap="outerHTML" hx-target="this">
  <h3 role="status" id="pblabel" tabindex="-1" autofocus>Running</h3>

  <div
    hx-get="/job/progress"
    hx-trigger="every 600ms"
    hx-target="this"
    hx-swap="innerHTML">
    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="pblabel">
      <div id="pb" class="progress-bar" style="width:0%">
    </div>
  </div>
</div>

此進度條每 600 毫秒更新一次，並將 “width” 樣式屬性和 aria-valuenow 屬性設定為目前的進度值。由於進度條 div 上有一個 id，htmx 會透過將樣式屬性設定為其新值，在請求之間平滑過渡。這與 CSS 過渡相結合，使視覺過渡連續而不是跳躍的。

最後，當進程完成時，伺服器會返回 HX-Trigger: done 標頭，這會觸發 UI 更新到 “Complete” 狀態，並在 UI 中添加一個重新啟動按鈕（在這個例子中，我們使用 class-tools 擴充功能來在按鈕上添加淡入效果）

<div hx-trigger="done" hx-get="/job" hx-swap="outerHTML" hx-target="this">
  <h3 role="status" id="pblabel" tabindex="-1" autofocus>Complete</h3>

  <div
    hx-get="/job/progress"
    hx-trigger="none"
    hx-target="this"
    hx-swap="innerHTML">
      <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="122" aria-labelledby="pblabel">
        <div id="pb" class="progress-bar" style="width:122%">
      </div>
    </div>
  </div>

  <button id="restart-btn" class="btn primary" hx-post="/start" classes="add show:600ms">
    Restart Job
  </button>
</div>

這個例子使用了從 Bootstrap 進度條複製的樣式

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

🔗演示