3

Ajax 呼び出しで読み込み中のスピナーを表示したい。ライブラリを試しspin.jsましたが、うまくいきませんでした。これは、Ajax 呼び出しを使用する私の JavaScript 関数です。

function sendRequest() {
    $.ajax({
            url: '/spinner',
            type: 'get',
            contentType: "application/json",
            success: function (resp) {
                $('#spinner').append(resp.data);
                console.log(resp.data);
            },
            error: function (){
                console.log("Oops!");
            }
        }
    );
}

私のHTMLコード:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/send.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.spin.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/spin.js"></script>
</head>
<body>
    <button id="butt" class="pure-button pure-button-primary" onclick="sendRequest()">Press me!</button>
    <div id="spinner">Greeting!</div>
</body>
</html>

-CSS-

#spinner {
    text-align: center;
    font-size: 100px;
    color: #FFFFFF;
    margin: 25px 350px 350px 350px;
    background: #ad9ea4;
    position: relative;
    padding: 50px;
}

サーバー側では少し遅延があります (5 秒)。実際には、この 5 秒間スピナーを表示したいと考えています。ページにアニメーション スピナーを追加するにはどうすればよいですか?

4

1 に答える 1