web 按钮Loading...的实现 with Bootstrap

最新推荐文章于 2025-10-06 13:42:21 发布

原创最新推荐文章于 2025-10-06 13:42:21 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #loading #bootstrap

Javascript / Typescript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Bootstrap实现按钮的加载效果，通过简单的HTML和JavaScript代码，可以在按钮被点击时显示加载状态。

web开发中，有一些按钮点击后需要一段时间进行后台处理，于是需要把按钮状态变成loading状态。

Bootstrap提供了这种效果，实现如下：

HTML：

<button type='submit' class='btn btn-danger btn-block btn-lg' data-loading-text='Processing...' autocomplete='off'>Confirm</button>

JavaScript：

<pre name="code" class="javascript">$('button[type=submit]').on('click', function(event) {
		var $btn = $(event.target);
		
                //start loading
                $btn.button('loading');
               
                //stop loading
                $btn.button('reset');
	});