import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Loading from '.';
import Button from '../button';
import { useState } from 'react';

<Meta title="反馈/顶部加载条 Loading" component={Loading} />

# 顶部加载条 Loading

## 导入

```typescript
import { Loading } from '@ahri-ui/core';
```

## 基本使用

<Canvas>
  <Story name="基本使用">
    {() => {
      const [loading, setLoading] = useState(true);
      return (
        <>
          <Button onClick={() => setLoading(false)}>加载完成</Button>
          <Loading done={!loading} />
        </>
      );
    }}
  </Story>
</Canvas>

## API

| 参数 | 说明     | 类型    | 默认值 |
| ---- | -------- | ------- | ------ |
| done | 是否完成 | boolean | false  |