Toast 提示

对操作结果的轻量级反馈，无需用户操作即可自行消失。最长文案不超过 2 行，最多可以显示 24 个字符，文案过长会被截断。

Toast - H5UIh5ui.io

轻提示

<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 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 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>