Loading 加载

加载指示器组件，支持全屏加载、局部加载和内联加载。

全屏加载

使用 SaLoading.service() 创建全屏加载遮罩。

javascript

// 显示全屏加载
const loading = SaLoading.service();

// 3秒后自动关闭
setTimeout(() => {
  loading.close();
}, 3000);

html

<button class="sa-button sa-button--primary" onclick="showFullScreenLoading()">显示全屏加载</button>

<script>
  SA.init('body');
  
  function showFullScreenLoading() {
    const loading = SaLoading.service();
    
    // 3秒后自动关闭
    setTimeout(() => {
      loading.close();
    }, 3000);
  }
</script>

加载 SanoUI 组件中...

带文本的全屏加载

javascript

const loading = SaLoading.service({
  text: '正在加载数据...'
});

// 关闭加载
loading.close();

html

<button class="sa-button sa-button--primary" onclick="showFullScreenLoadingWithText()">显示带文本的全屏加载</button>

<script>
  SA.init('body');
  
  function showFullScreenLoadingWithText() {
    const loading = SaLoading.service({
      text: '正在加载数据...'
    });
    
    // 3秒后自动关闭
    setTimeout(() => {
      loading.close();
    }, 3000);
  }
</script>

加载 SanoUI 组件中...

局部加载

在指定容器上显示加载遮罩。

javascript

// 在指定容器上显示加载
const loading = SaLoading.show('#my-container');

// 关闭加载
loading.close();

html

<div id="local-loading-container" style="height: 200px; position: relative; border: 1px solid #ddd; border-radius: 4px; padding: 1rem;">
  <div>这是容器内容</div>
</div>
<button class="sa-button sa-button--primary" onclick="showLocalLoading()" style="margin-top: 1rem;">显示局部加载</button>

<script>
  SA.init('body');
  
  function showLocalLoading() {
    const loading = SaLoading.show('#local-loading-container');
    
    // 3秒后自动关闭
    setTimeout(() => {
      loading.close();
    }, 3000);
  }
</script>

加载 SanoUI 组件中...

带文本的局部加载

javascript

const loading = SaLoading.show('#my-container', {
  text: '加载中...'
});

loading.close();

html

<div id="local-loading-text-container" style="height: 200px; position: relative; border: 1px solid #ddd; border-radius: 4px; padding: 1rem;">
  <div>这是容器内容</div>
</div>
<button class="sa-button sa-button--primary" onclick="showLocalLoadingWithText()" style="margin-top: 1rem;">显示带文本的局部加载</button>

<script>
  SA.init('body');
  
  function showLocalLoadingWithText() {
    const loading = SaLoading.show('#local-loading-text-container', {
      text: '加载中...'
    });
    
    // 3秒后自动关闭
    setTimeout(() => {
      loading.close();
    }, 3000);
  }
</script>

加载 SanoUI 组件中...

不同尺寸

通过 size 配置加载指示器大小。

javascript

// 大尺寸
const loadingLarge = SaLoading.show('#container', { size: 'large' });

// 默认尺寸
const loadingDefault = SaLoading.show('#container', { size: 'default' });

// 小尺寸
const loadingSmall = SaLoading.show('#container', { size: 'small' });

html

<div id="size-loading-container" style="height: 200px; position: relative; border: 1px solid #ddd; border-radius: 4px; padding: 1rem;">
  <div>这是容器内容</div>
</div>
<div style="display: flex; gap: 10px; margin-top: 1rem;">
  <button class="sa-button" onclick="showLargeLoading()">大尺寸</button>
  <button class="sa-button" onclick="showDefaultLoading()">默认尺寸</button>
  <button class="sa-button" onclick="showSmallLoading()">小尺寸</button>
</div>

<script>
  SA.init('body');
  
  let currentLoading = null;
  
  function closeCurrentLoading() {
    if (currentLoading) {
      currentLoading.close();
      currentLoading = null;
    }
  }
  
  function showLargeLoading() {
    closeCurrentLoading();
    currentLoading = SaLoading.show('#size-loading-container', { size: 'large' });
    setTimeout(() => closeCurrentLoading(), 3000);
  }
  
  function showDefaultLoading() {
    closeCurrentLoading();
    currentLoading = SaLoading.show('#size-loading-container', { size: 'default' });
    setTimeout(() => closeCurrentLoading(), 3000);
  }
  
  function showSmallLoading() {
    closeCurrentLoading();
    currentLoading = SaLoading.show('#size-loading-container', { size: 'small' });
    setTimeout(() => closeCurrentLoading(), 3000);
  }
</script>

加载 SanoUI 组件中...

内联加载

创建内联加载图标，可以插入到按钮或其他元素中。

javascript

// 创建内联加载图标
const loadingIcon = SaLoading.createInline('#my-button', { size: 'small' });
document.getElementById('my-button').appendChild(loadingIcon);

html

<button class="sa-button sa-button--primary" id="inline-loading-btn" onclick="showInlineLoading()">显示内联加载</button>

<script>
  SA.init('body');
  
  let inlineLoadingIcon = null;
  
  function showInlineLoading() {
    const btn = document.getElementById('inline-loading-btn');
    
    // 如果已有加载图标，先移除
    if (inlineLoadingIcon) {
      inlineLoadingIcon.remove();
      inlineLoadingIcon = null;
      btn.disabled = false;
      btn.textContent = '显示内联加载';
      return;
    }
    
    // 创建内联加载图标
    inlineLoadingIcon = SaLoading.createInline(btn, { size: 'small' });
    btn.appendChild(inlineLoadingIcon);
    btn.disabled = true;
    btn.textContent = '加载中...';
    
    // 3秒后自动移除
    setTimeout(() => {
      if (inlineLoadingIcon) {
        inlineLoadingIcon.remove();
        inlineLoadingIcon = null;
        btn.disabled = false;
        btn.textContent = '显示内联加载';
      }
    }, 3000);
  }
</script>

加载 SanoUI 组件中...

异步请求示例

在发送异步请求时显示加载，请求完成后自动关闭。

javascript

async function fetchData() {
  const loading = SaLoading.service({ text: '正在加载数据...' });
  
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // 处理数据
    return data;
  } finally {
    loading.close();
  }
}

html

<button class="sa-button sa-button--primary" onclick="fetchDataExample()">模拟异步请求</button>
<div id="fetch-result" style="margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; display: none;"></div>

<script>
  SA.init('body');
  
  async function fetchDataExample() {
    const loading = SaLoading.service({ text: '正在加载数据...' });
    const resultDiv = document.getElementById('fetch-result');
    resultDiv.style.display = 'none';
    
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // 模拟返回数据
      const data = { message: '数据加载成功！' };
      
      resultDiv.textContent = data.message;
      resultDiv.style.display = 'block';
    } catch (error) {
      resultDiv.textContent = '加载失败：' + error.message;
      resultDiv.style.display = 'block';
    } finally {
      loading.close();
    }
  }
</script>

加载 SanoUI 组件中...

API

静态方法

方法名	说明	参数	返回值
`service`	创建全屏加载	`options?: LoadingOptions`	`LoadingInstance`
`show`	在指定容器上显示加载	`container: string \| HTMLElement, options?: LoadingOptions`	`LoadingInstance`
`createInline`	创建内联加载图标	`container: string \| HTMLElement, options?: InlineLoadingOptions`	`HTMLElement`

配置选项

参数	说明	类型	可选值	默认值
text	加载文本	`string`	-	`''`
size	尺寸	`string`	`large` / `default` / `small`	`default`
customClass	自定义类名	`string`	-	`''`

LoadingInstance 方法

方法名	说明	参数	返回值
close	关闭加载	-	`void`

示例代码

全屏加载

javascript

// 显示全屏加载
const loading = SaLoading.service({
  text: '正在加载...'
});

// 关闭加载
loading.close();

局部加载

javascript

// 在容器上显示加载
const loading = SaLoading.show('#my-container', {
  text: '加载中...',
  size: 'large'
});

// 关闭加载
loading.close();

内联加载

javascript

// 创建内联加载图标
const icon = SaLoading.createInline('#button-container', {
  size: 'small'
});

// 将图标添加到按钮中
const button = document.getElementById('my-button');
button.appendChild(icon);

// 移除图标
icon.remove();

表格加载

javascript

function reloadTable() {
  const loading = SaLoading.show('#table-container', { 
    text: '加载表格数据...' 
  });
  
  fetch('/api/table-data')
    .then(res => res.json())
    .then(data => {
      // 更新表格数据
      updateTable(data);
    })
    .finally(() => {
      loading.close();
    });
}

实际使用场景

场景 1：表格数据加载

在加载表格数据时显示加载状态。

html

<div id="table-container" style="height: 300px; position: relative; border: 1px solid #ddd; border-radius: 4px; padding: 1rem;">
  <div id="table-content">表格内容区域</div>
</div>
<button class="sa-button sa-button--primary" onclick="loadTableData()" style="margin-top: 1rem;">加载数据</button>

<script>
  SA.init('body');
  
  async function loadTableData() {
    const loading = SaLoading.show('#table-container', {
      text: '正在加载表格数据...'
    });
    
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // 更新表格内容
      document.getElementById('table-content').innerHTML = '数据加载完成';
    } finally {
      loading.close();
    }
  }
</script>

加载 SanoUI 组件中...

场景 2：表单提交加载

在表单提交时显示加载状态，防止重复提交。

html

<form id="submit-form" style="max-width: 400px;">
  <div class="sa-input" data-placeholder="用户名" style="width: 100%; margin-bottom: 1rem;"></div>
  <button type="submit" class="sa-button sa-button--primary" id="submit-btn">提交</button>
</form>

<script>
  SA.init('body');
  
  let loadingInstance = null;
  
  document.getElementById('submit-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const submitBtn = document.getElementById('submit-btn');
    submitBtn.disabled = true;
    
    // 显示按钮内联加载
    const loadingIcon = SaLoading.createInline(submitBtn, { size: 'small' });
    submitBtn.appendChild(loadingIcon);
    
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 2000));
      alert('提交成功！');
    } finally {
      loadingIcon.remove();
      submitBtn.disabled = false;
    }
  });
</script>

加载 SanoUI 组件中...

Loading 加载 ​

全屏加载 ​

带文本的全屏加载 ​

局部加载 ​

带文本的局部加载 ​

不同尺寸 ​

内联加载 ​

异步请求示例 ​

API ​

静态方法 ​

配置选项 ​

LoadingInstance 方法 ​

示例代码 ​

全屏加载 ​

局部加载 ​

内联加载 ​

表格加载 ​

实际使用场景 ​

场景 1：表格数据加载 ​

场景 2：表单提交加载 ​

Loading 加载

全屏加载

带文本的全屏加载

局部加载

带文本的局部加载

不同尺寸

内联加载

异步请求示例

API

静态方法

配置选项

LoadingInstance 方法

示例代码

全屏加载

局部加载

内联加载

表格加载

实际使用场景

场景 1：表格数据加载

场景 2：表单提交加载