10 examples of 'jquery loading animation while page loads' in JavaScript

181
function toggleLoading(on, callback) {
182
    var loading = get("sb-loading"),
183
        playerName = S.getCurrent().player,
184
        anim = (playerName == "img" || playerName == "html"); // fade on images & html
185
186
    if (on) {
187
        S.setOpacity(loading, 0);
188
        loading.style.display = "block";
189
190
        var wrapped = function() {
191
            S.clearOpacity(loading);
192
            if (callback)
193
                callback();
194
        }
195
196
        if (anim) {
197
            animate(loading, "opacity", 1, S.options.fadeDuration, wrapped);
198
        } else {
199
            wrapped();
200
        }
201
    } else {
202
        var wrapped = function() {
203
            loading.style.display = "none";
204
            S.clearOpacity(loading);
205
            if (callback)
206
                callback();
207
        }
208
209
        if (anim) {
210
            animate(loading, "opacity", 0, S.options.fadeDuration, wrapped);
211
        } else {
212
            wrapped();
213
        }
214
    }
215
}

27
function removeAnimation(animation) {
28
    var index = animations.indexOf(animation);
29
    if (index > -1) animations.splice(index, 1);
30
}

9
init() {
10
  let ele = this.enteringView.pageRef().nativeElement;
11
  let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
12
  let wrapper = new Animation(this.plt, ele.querySelector('.loading-wrapper'));
13
14
  wrapper.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
15
  backdrop.fromTo('opacity', 0.01, 0.3);
16
17
  this
18
    .easing('ease-in-out')
19
    .duration(200)
20
    .add(backdrop)
21
    .add(wrapper);
22
}

117
function animate() {
118
  requestAnimationFrame(animate);
119
  orbitControls.update();
120
  pivot.rotation.z += rot;
121
  if (pivot.rotation.z > 0.0 || pivot.rotation.z < -Math.PI/2) rot *= -1;
122
  render();
123
}

430
static stopLoadingAnimation() {
431
    const prog = document.getElementById("task-spinner")!;
432
    if (prog.style.display !== "none") {
433
        prog.style.display = "none";
434
    }
435
}

8
function loading_page(){
9
    $('.main_page').fadeOut('slow');
10
    $('.body').show();
11
    $('.progress').fadeIn('slow');
12
}

8
function loading_page(){
9
    $(".main_page").fadeOut("slow");
10
    $(".body").show();
11
    $(".progress").fadeIn("slow");
12
}

86
var callAnimate = function callAnimate() {
87
88
	if (percent <= 100) {
89
		var animate = Raphael.animation({ path: data[percent] }, easing(percent), "linear", callAnimate);
90
		path.animate(animate);
91
	}
92
	percent++;
93
};

82
attemptToLoad() {
83
  if (this.inViewport()) {
84
    this.loadElement();
85
  }
86
}

58
;(function animation () {
59
    setTimeout(() => {
60
        if ($slingshotGrid.hasClass('active')) {
61
            $slingshotGrid.addClass('previous')
62
            $slingshotGrid.removeClass('active')
63
            $slingshotCategories.removeClass('next')
64
            $slingshotCategories.addClass('active')
65
            $slingshotCategoriesBtn.addClass('active')
66
            $slingshotGridButton.removeClass('active')
67
        } else if ($slingshotCategories.hasClass('active')) {
68
            $slingshotCategories.addClass('previous')
69
            $slingshotCategories.removeClass('active')
70
            $slingshotSearch.removeClass('next')
71
            $slingshotSearch.addClass('active')
72
            $slingshotClearIcon.removeClass('inactive')
73
            $slingshotSearchTerm.removeClass('inactive')
74
            $searchOne.addClass('active')
75
            setTimeout(function () {
76
                $searchOne.removeClass('active')
77
                $searchTwo.addClass('active')
78
            }, 700)
79
            setTimeout(function () {
80
                $searchTwo.removeClass('active')
81
                $searchThree.addClass('active')
82
            }, 1200)
83
            $searchThree.removeClass('active')
84
            $slingshotLinked.addClass('inactive')
85
            $slingshotEntry.addClass('expanded')
86
        } else if ($slingshotSearch.hasClass('active')) {
87
            $slingshotSearch.addClass('next')
88
            $slingshotSearch.removeClass('active')
89
            $slingshotGrid.removeClass('previous')
90
            $slingshotGrid.addClass('active')
91
            $slingshotCategories.addClass('next')
92
            $slingshotCategories.removeClass('previous')
93
            $slingshotAreas1.addClass('inactive')
94
            $slingshotLinked.removeClass('inactive')
95
            $slingshotEntry.removeClass('expanded')
96
            $slingshotGridButton.addClass('active')
97
            $slingshotCategoriesBtn.removeClass('active')
98
        }
99
        requestAnimationFrame(animation)
100
    }, 3000)
101
})()