# Toast 提示

{% embed url="<https://h5ui.io/example/toast.html>" %}

## **轻提示**

<div align="left"><figure><img src="https://845300444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhAqktU0WcqWGe1q03GXN%2Fuploads%2Fl1mirZrxOPmRyzxzKXZO%2Ftoast-default.png?alt=media&#x26;token=c7cb5625-a15c-4169-b02c-ac22008d37f9" alt="" width="375"><figcaption></figcaption></figure></div>

```html
<div class="h5ui-toast" id="toast-default">
    <div class="h5ui-toast_backdrop"></div>
    <div class="h5ui-toast_dialog">
        <div class="h5ui-toast_content">
            <span>验证码已发送</span>
        </div>
    </div>
</div>
```

## 等待提示

<div align="left"><figure><img src="https://845300444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhAqktU0WcqWGe1q03GXN%2Fuploads%2FNttJk9Ph7B1KJq1HSciq%2Ftoast-loading.png?alt=media&#x26;token=7df08292-839b-448c-86e8-aa111d0d1636" alt="" width="375"><figcaption></figcaption></figure></div>

```html
<div class="h5ui-toast h5ui-toast_loading" id="toast-loading">
    <div class="h5ui-toast_backdrop"></div>
    <div class="h5ui-toast_dialog">
        <div class="h5ui-toast_content">
            <span>
                <div class="h5ui-toast_loading_icon">
                    <div class="loading-icon-leaf loading-icon-leaf_0"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_1"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_2"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_3"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_4"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_5"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_6"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_7"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_8"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_9"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_10"></div>
                    <div class="loading-icon-leaf loading-icon-leaf_11"></div>
                </div>
                加载中
            </span>
        </div>
    </div>
</div>
```

## **成功提示**

<div align="left"><figure><img src="https://845300444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhAqktU0WcqWGe1q03GXN%2Fuploads%2Fu5pA9AwbcOIJaqpF3x8t%2Ftoast-success.png?alt=media&#x26;token=d6789beb-02ee-463a-9031-8ffee94093a4" alt="" width="375"><figcaption></figcaption></figure></div>

```html
<div class="h5ui-toast h5ui-toast_success" id="toast-success">
    <div class="h5ui-toast_backdrop"></div>
    <div class="h5ui-toast_dialog">
        <div class="h5ui-toast_content">
            <span><i class="h5ui-toast_success_icon"></i>已完成</span>
        </div>
    </div>
</div>
```