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

Every line of 'jquery loading animation while page loads' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
181function 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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

27function removeAnimation(animation) {
28 var index = animations.indexOf(animation);
29 if (index > -1) animations.splice(index, 1);
30}
9init() {
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}
117function 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}
430static stopLoadingAnimation() {
431 const prog = document.getElementById("task-spinner")!;
432 if (prog.style.display !== "none") {
433 prog.style.display = "none";
434 }
435}
8function loading_page(){
9 $('.main_page').fadeOut('slow');
10 $('.body').show();
11 $('.progress').fadeIn('slow');
12}
8function loading_page(){
9 $(".main_page").fadeOut("slow");
10 $(".body").show();
11 $(".progress").fadeIn("slow");
12}
86var 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};
82attemptToLoad() {
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})()

Related snippets