jquery - loading.gif (ただしカスタマイズ済み)

Question

私は、loading.gif などをカスタマイズできる、tinternet に関するさまざまな Web サイトを知っていますが、知りたかったことは...

adobeなどでgifを作成する以外に、カスタムテキストの読み込みを作成する方法はありますか...

そのため、どこにでもあるスピナーの代わりに、画像の読み込み中にアニメーション化するテキストを指定できます。

高低を検索しましたが、何も見つかりませんでした。私が得た最も近いものはjqueryスピナーでしたが、それは私が求めているものではありません。

皆さんのいずれかが以前にこれに出くわしたことがあるかどうか疑問に思いました。もしそうなら、それをカスタマイズするために何をしましたか..

例：

次のアニメーション (gif として) が表示される場合があります。

う……

笑.....

ロア....

ロード...

ローディ..

ロードイン。

読み込み中

上記がアニメーションのループを作成することによって行われることは知っていますが、おそらくjqueryを使用して、カスタム読み込みメッセージを作成する最新の方法があるかどうか疑問に思いました...フラッシュなどで行われたのを見ました

Answer 1

このようなもの ？

var $ld = $('#loading');
var idx = 1;
var msg = "Loading..";
var loader = setInterval(function(){
    $ld.text(msg.substr(0,idx));
    idx++;
    if (idx > msg.length)
        idx=1;
},100);

完了したら呼び出しますclearTimeout(loader)。

デモ: http://www.jsfiddle.net/gaby/5CVQu/

Answer 2

jQueryは必要ありません:

<div id="loading"></div>

.

function loading(e, s, t) {
    const to = 200; // miliseconds
    if (arguments.length == 2) t = s;
    switch (s) {
    case '':
        e.innerHTML = '';
        loading(e, t, t);
        break;
    default:
        e.innerHTML += s.charAt(0);
        setTimeout(function() {
            loading(e, s.substr(1), t);
        }, to);
    }
}

loading(document.getElementById('loading'), 'NOW LOADING...');

http://jsfiddle.net/SHiNKiROU/Su2hy/

編集：読み込みメッセージにドットパディングが必要だと思います

<div id="loading" style="font-family: monospace;"></div>

.

function loading(e, s) {
        const to = 200; // miliseconds
        var x = 0;

        function helper(i) {
            var ht = '';
            for (var j = 0; j <= i; j++) {
                ht += s.charAt(j);
            }
            for (var j = i + 1; j < s.length; j ++) {
                ht += '.';
            }
            e.innerHTML = ht;
        }
        return setInterval(function() {
            helper(x++);
            if (x == s.length) x = 0;
        }, to);
}

var intv = loading(document.getElementById('loading'), 'LOADING');
// clearInterval(intv); when loading finished

http://jsfiddle.net/SHiNKiROU/Su2hy/9/

Answer 3

CSS-TricksのこのjQueryプラグインがあります。