加载指标

#集装箱装载指示器

加载指示器

集装箱中使用的装载指示器。

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
    </div>
    <p>This is some content inside the container</p>
    <p>The loading indicator must be prepended to it</p>
</div>

文本加载指示器

加载指示器可以通过添加<div> 内的元素。

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
        <div>Loading...</div>
    </div>
</div>

加载指示器尺寸

加载指示器的大小可以通过添加size-X 到容器。这些尺寸可供选择：size-small.

<div class="loading-indicator-container">
    <div class="loading-indicator size-small">
        <span></span>
        <div>Loading (size-small)</div>
    </div>
</div>

加载指示器对齐

加载指示器可以通过添加与中心对齐indicator-center 到容器和/或指示器。

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-center">
        <span></span>
    </div>
</div>

您可以添加一些可选文本：

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-center">
        <span></span>
        <div>Loading...</div>
    </div>
</div>

Example

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
    </div>
    <p>This is some content inside the container</p>
    <p>The loading indicator must be prepended to it</p>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
        <div>Loading...</div>
    </div>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-inset">
        <span></span>
        <div>Loading (inset)</div>
    </div>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator size-small">
        <span></span>
        <div>Loading (size-small)</div>
    </div>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-center">
        <span></span>
    </div>
</div>