javascript - ローダーのアクティブなクラスが有効になっていません

Question

セマンティックUIモーダルにローダーを3秒間表示させてから消えさせようとしています。クラスの追加と削除は正常に機能しますが、遅延は機能しません。

Javascript:

function login_click() {
    $("#ld").addClass("active").delay(3000).removeClass("active");
}

HTML:

<div class="ui small modal" style="font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;">
    <i class="close icon"></i>
    <div class="header">
        Login
    </div>
    <div class="content">
        <div class="left">
            <div class="ui form">
            <form method="post" action=""  id="loginForm">
                <div class="field">
                    <div class="ui left labeled icon input">
                        <input name="username" type="text" id="username" value="" placeholder="Username" maxlength="20">
                        <i class="user icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui left labeled icon input">
                        <input name="password" type="password" id="password" value="" placeholder="Password" maxlength="50">
                        <i class="lock icon"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="actions">
          <input class="ui blue submit button" name="submit" type="submit" id="submit" value="Login">
    </div>
    <div id="ld" class="ui inverted dimmer">
        <div class="ui text loader">Loading...</div>
    </div>
</div>