https://dreamy-mermaid-f46b67.netlify.app/mobile/javascript/LoadingJS.js

1var LoadingJS = function(){
2	this.initConfig();
3	this.initHtml();
4	this.initCss();
5	this.startLoading();
6	
7	this.onResize();
8	var self = this;
9	$(window).resize(function(){
10		self.onResize();
11	});
12}
13
14LoadingJS.prototype = {
15	
16	initHtml : function(){
17		this.instance = $("<div class='loading'></div>");
18		this.image = $("<img src='" + this.loadingPicture + "'/>");
19		this.title = $("<p></p>");
20		this.loadingProgress = $("<p></p>");
21		
22		if(this.loadingPicture) this.instance.append(this.image);
23		this.instance.append(this.title);
24		this.instance.append(this.loadingProgress);
25		$("body").append(this.instance);
26	},
27	
28	initConfig : function(){
29		  this.loadingCaption, this.loadingCaptionColor, this.loadingPicture;
30		  try{
31		  	this.loadingCaption = bookConfig.loadingCaption ? bookConfig.loadingCaption : "Loading";
32		  	this.loadingCaptionColor = bookConfig.loadingCaptionColor ? bookConfig.loadingCaptionColor : "#DDDDDD";
33		  	this.loadingBackground = bookConfig.loadingBackground ? bookConfig.loadingBackground : "#1F2232";
34		  	this.loadingPicture = bookConfig.loadingPicture ? bookConfig.loadingPicture : "";
35		  }catch(err){
36		  	this.loadingCaption = "Loading";
37		  	this.loadingCaptionColor = "#DDDDDD";
38		  	this.loadingBackground = "#1F2232";
39		  	this.loadingPicture = "";
40		  }
41	},
42	
43	startLoading : function(){
44		this.title.text($(document).attr("title"));
45		this.loadingProgress.text(this.loadingCaption + "...");
46		
47		var self = this, iIndex = 0;
48		this.timer = window.setInterval(function(){
49			iIndex ++;
50			var iCount = iIndex % 3;
51			
52			switch(iCount){
53				case 0:{self.loadingProgress.text(self.loadingCaption + ".  ");break;}
54				case 1:{self.loadingProgress.text(self.loadingCaption + ".. ");break;}
55				case 2:{self.loadingProgress.text(self.loadingCaption + "...");break;}
56				default:break;
57			}
58		}, 2000);
59	},
60	
61	destroy : function(){
62		window.clearInterval(this.timer);
63		this.instance.remove();
64		this.image.attr("src", "");
65		$("body").css({"background-color" : ""});
66	},
67	
68	initCss : function(){
69		$("html").css({
70			"margin" : 0,
71			"padding" : 0,
72			"width" : "100%",
73			"height" : "100%"
74		});
75		$("body").css({
76			"margin" : 0,
77			"padding" : 0,
78			"width" : "100%",
79			"height" : "100%",
80			"position" : "absolute",
81			"background-color" : this.loadingBackground
82		});
83		this.instance.css({
84			"max-width" : "100%",
85			"max-height" : "100%",
86			"color" : this.loadingCaptionColor,
87			"text-align" : "center",
88			"vertical-align" : "middle",
89			"font-family" : "Tahoma",
90		    "position" : "relative",
91		    "top": "50%",
92		    "-webkit-transform" : "translateY(-50%)",
93		    "-moz-transform" : "translateY(-50%)",
94		    "-ms-transform" : "translateY(-50%)",
95		    "-o-transform" : "translateY(-50%)",
96		    "transform" : "translateY(-50%)"
97		});
98		this.image.css({
99			"max-width" : "100%",
100			"max-height" : "50%"
101		});
102		this.title.css({
103		  	"font-size" : "24px",
104		  	"text-shadow" : "0 0 5px #8c97cb, 0 0 10px #8c97cb, 0 0 15px #8c97cb"
105		});
106		this.loadingProgress.css({
107			"font-size" : "12px"
108		});
109	},
110	
111	onResize : function(){
112		var windowWidth = $("body").width();
113		var windowHeight = $("body").height();
114		this.image.css({
115			"max-width" : windowWidth + "px",
116			"max-height" : windowHeight / 2 + "px"
117		});
118	}
119}
120
121var jsLoadingBar = new LoadingJS();