JAVASCRIPT   19

LoadingJS.js

Guest on 12th January 2022 12:17:26 AM

  1. var styleCss = "<style>"+
  2.         "@keyframes loadingAnimate{from {-webkit-transform: rotateY(0deg);-o-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}to {-webkit-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);transform: rotateY(-180deg);}}"+
  3.         "@-webkit-keyframes loadingAnimate{from {-webkit-transform: rotateY(0deg);-o-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}to {-webkit-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);transform: rotateY(-180deg);}}"+
  4.         ".loadingRun{-webkit-animation : loadingAnimate 1.2s infinite;animation : loadingAnimate 1.2s infinite;}</style>";
  5. $("body").append(styleCss);
  6.  
  7. window.waitForLoading = true;
  8. var LoadingJS = function(){
  9.         this.initConfig();
  10.         this.initHtml();
  11.         this.initCss();
  12.         this.startLoading();
  13.  
  14.         this.onResize();
  15.         var self = this;
  16.         $(window).resize(function(){
  17.                 self.onResize();
  18.         });
  19.  
  20.         window.setTimeout(function(){window.waitForLoading = false;},250);
  21. }
  22.  
  23. LoadingJS.prototype = {
  24.  
  25.         initHtml : function(){
  26.                 this.stop = false;
  27.                 this.loadImageUrl = "<svg t=\"1525916222299\" class=\"icon\" style=\"\" viewBox=\"130 0 800 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2478\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"49\" height=\"56\"><defs><style type=\"text/css\"></style></defs><path d=\"M835.55027 48.761905C876.805122 48.761905 910.222223 81.441158 910.222223 121.753604L910.222223 902.095C910.222223 902.095 910.222223 942.409011 876.805 975.238095L113.777778 975.238095 113.777778 24.380952 88.888889 48.761905 835.55027 48.761905ZM64 0 64 24.380952 64 1024L960 1024C835.55027 1024 904.277615 1024 960 969.325498L960 54.49204C960 54.49204 904.277615 0 835.55027 0L88.888889 0 64 0Z\" p-id=\"2479\"></path><path d=\"M775.164361 219.428572C788.910114 219.428572 800.05325 208.512847 800.05325 195.047619 800.05325 181.582391 788.910114 170.666667 775.164361 170.666667L263.111111 170.666667C249.365357 170.666667 238.222222 181.582391 238.222222 195.047619 238.222222 208.512847 249.365357 219.428572 263.111111 219.428572L775.164361 219.428572Z\" p-id=\"2481\"></path><path d=\"M775.164361 365.714285C788.910114 365.714285 800.05325 354.798562 800.05325 341.333333 800.05325 327.868105 788.910114 316.952382 775.164361 316.952382L263.111111 316.952382C249.365357 316.952382 238.222222 327.868105 238.222222 341.333333 238.222222 354.798562 249.365357 365.714285 263.111111 365.714285L775.164361 365.714285Z\" p-id=\"2482\"></path><path d=\"M775.164361 536.380951C788.910114 536.380951 800.05325 525.465229 800.05325 512 800.05325 498.534771 788.910114 487.619049 775.164361 487.619049L263.111111 487.619049C249.365357 487.619049 238.222222 498.534771 238.222222 512 238.222222 525.465229 249.365357 536.380951 263.111111 536.380951L775.164361 536.380951Z\" p-id=\"2483\"></path></svg>";
  28.                 this.instance = $("<div></div>");
  29.                 this.image = $("<img src='" + this.loadingPicture + "'/>");
  30.                 this.title = $("<p></p>");
  31.  
  32.                 this.bg = $("<div style='transform:scale(1)'></div>");
  33.  
  34.                 if(this.loadingPicture) this.instance.append(this.image);
  35.  
  36.                 this.initAnimationHtml();
  37.  
  38.                 this.instance.append(this.title);
  39.                 this.bg.append(this.instance);
  40.                 $("body").append(this.bg);
  41.         },
  42.  
  43.         initAnimationHtml : function(){
  44.  
  45.                 this.loadBox = $("<div></div>");
  46.                 var img1 = $(this.loadImageUrl);
  47.                 var img2 = $(this.loadImageUrl);
  48.                 this.img3 = $(this.loadImageUrl);
  49.                 this.img3.attr("class", "loadingRun");
  50.  
  51.                 this.loadBox.css({
  52.                         "position":"relative",
  53.                         "perspective":"200px",
  54.                         "-webkit-transform-style":"preserve-3d",
  55.                         "-o-transform-style":"preserve-3d",
  56.                         "-ms-transform-style":"preserve-3d",
  57.                         "-moz-transform-style":"preserve-3d",
  58.                         "transform-style":"preserve-3d"
  59.                 });
  60.  
  61.                 this.img3.css({
  62.                         "position" : "absolute" ,
  63.                         "left" : "50%" ,
  64.                         "z-index" : "-1" ,
  65.                         "-webkit-transform-origin" : "0 50%",
  66.                         "-o-transform-origin" : "0 50%",
  67.                         "-ms-transform-origin" : "0 50%",
  68.                         "-moz-transform-origin" : "0 50%",
  69.                         "transform-origin" : "0 50%",
  70.                         "fill" : this.loadingCaptionColor
  71.                 });
  72.  
  73.                 img2.css({
  74.                         "position" : "absolute" ,
  75.                         "left" : "-50%" ,
  76.                         "-webkit-transform":"rotateY(180deg)",
  77.                         "-o-transform":"rotateY(180deg)",
  78.                         "-ms-transform":"rotateY(180deg)",
  79.                         "-moz-transform":"rotateY(180deg)",
  80.                         "transform":"rotateY(180deg)",
  81.                         "fill" : this.loadingCaptionColor
  82.                 });
  83.  
  84.                 img1.css({
  85.                         "position" : "absolute" ,
  86.                         "left" : "50%",
  87.                         "fill" : this.loadingCaptionColor
  88.                 });
  89.  
  90.                 this.loadBox.append(img1).append(img2).append(this.img3);
  91.                 this.instance.append(this.loadBox);
  92.         },
  93.  
  94.         initConfig : function(){
  95.                   this.loadingCaption, this.loadingCaptionColor, this.loadingPicture;
  96.                   try{
  97.                         this.loadingCaption = bookConfig.loadingCaption ? bookConfig.loadingCaption : "Loading";
  98.                         this.loadingCaptionColor = bookConfig.loadingCaptionColor ? bookConfig.loadingCaptionColor : "#DDDDDD";
  99.                         this.loadingBackground = bookConfig.loadingBackground ? bookConfig.loadingBackground : "#1F2232";
  100.                         this.loadingPicture = bookConfig.loadingPicture ? bookConfig.loadingPicture : "";
  101.                   }catch(err){
  102.                         this.loadingCaption = "Loading";
  103.                         this.loadingCaptionColor = "#BDBDBD";
  104.                         this.loadingBackground = "#1F2233";
  105.                         this.loadingPicture = "";
  106.                   }
  107.         },
  108.  
  109.         startLoading : function(){
  110.                 this.title.text($(document).attr("title"));
  111.         },
  112.  
  113.         destroy : function(){
  114.  
  115.                 animateOnce(this.bg , {"opacity":"0"} , 0.6 ,function(){
  116.                         this.img3.attr("class", "");
  117.                         $("body>style").html("");
  118.                         this.bg.remove();
  119.                         this.image.attr("src", "");
  120.                         $("body").css({"background-color" : ""});
  121.                 }.bind(this));
  122.         },
  123.  
  124.         initCss : function(){
  125.                 $("html").css({
  126.                         "margin" : 0,
  127.                         "padding" : 0,
  128.                         "width" : "100%",
  129.                         "height" : "100%"
  130.                 });
  131.  
  132.                 $("body").css({
  133.                         "margin" : 0,
  134.                         "padding" : 0,
  135.                         "width" : "100%",
  136.                         "height" : "100%",
  137.                         "position" : "fixed",
  138.                         "background-color" : this.loadingBackground
  139.                 });
  140.  
  141.                 this.bg.css({
  142.                         "margin" : 0,
  143.                         "padding" : 0,
  144.                         "width" : "100%",
  145.                         "height" : "100%",
  146.                         "position" : "fixed",
  147.                         "background-color" : this.loadingBackground
  148.                 });
  149.  
  150.                 this.instance.css({
  151.                         "width" : "100%",
  152.                         "height" : "100%",
  153.                         "color" : this.loadingCaptionColor,
  154.                         "text-align" : "center",
  155.                         "vertical-align" : "middle",
  156.                         "font-family" : "Tahoma",
  157.                     "position" : "relative"
  158.  
  159.                 });
  160.  
  161.                 this.image.css({
  162.                         "position" : "absolute",
  163.                         "bottom" : "75%",
  164.                         "left" : "50%",
  165.                         "-webkit-transform" : "translate(-50% , 50%)",
  166.                     "-moz-transform" : "translate(-50% , 50%)",
  167.                     "-ms-transform" : "translate(-50% , 50%)",
  168.                     "-o-transform" : "translate(-50% , 50%)",
  169.                         "transform" : "translate(-50% , 50%)",
  170.                         "margin-bottom" : "28px",
  171.                         "max-width" : "40%",
  172.                         "max-height" : "30%"
  173.                 });
  174.  
  175.                 if(window.innerHeight <= 300) this.image.hide();
  176.  
  177.                 var titleTran = "translate(-50%, 16px)";
  178.                 var loadingBoxTran = "translate(-50% , -56px)";
  179.  
  180.                 // if(this.loadingPicture) {
  181.                         // var titleTran = "translate(-50%, 40px)";
  182.                         // var loadingBoxTran = "translate(-50% , -50%)";
  183.                 // }
  184.  
  185.                 this.title.css({
  186.                         "font-family":"Arial",
  187.                         "font-size" : "24px",
  188.                         "position" : "absolute",
  189.                         "top" : "50%",
  190.                         "left" : "50%",
  191.                         "-webkit-transform" : titleTran,
  192.                     "-moz-transform" : titleTran,
  193.                     "-ms-transform" : titleTran,
  194.                     "-o-transform" : titleTran,
  195.                         "transform" : titleTran,
  196.                         "margin" : 0,
  197.                         "padding" : 0
  198.                 });
  199.  
  200.                 this.loadBox.css({
  201.                         "position" : "absolute",
  202.                         "width" : "49px",
  203.                         "height" : "56px",
  204.                         "left" : "50%",
  205.                         "top" : "50%",
  206.                         "-webkit-transform" : loadingBoxTran,
  207.                     "-moz-transform" : loadingBoxTran,
  208.                     "-ms-transform" : loadingBoxTran,
  209.                     "-o-transform" : loadingBoxTran,
  210.                         "transform" : loadingBoxTran,
  211.                         "padding" : 0
  212.                 });
  213.         },
  214.  
  215.         onResize : function(){}
  216.  
  217. }
  218.  
  219. var jsLoadingBar = new LoadingJS();

Raw Paste


Login or Register to edit or fork this paste. It's free.