JAVASCRIPT   9

LoadingJS.js

Guest on 5th June 2021 05:30:17 PM

  1. function LoadingJS(){
  2.      
  3.       this.loadBookConfig();   //#1F2232,#DDDDDD
  4.      
  5.       this.body = $("body");
  6.  
  7.   this.instance = $("<div id='loading_bg'></div>");
  8.   this.proTitle = $("<div id='progress_title'></div>");
  9.   this.stepTitle = $("<div id='step_title'></div>");
  10.   this.loadingBG = $("<div id='loading_progres'></div>");
  11.   this.loadingItem = $("<div id='loading_progress_item'></div>");
  12.  
  13.   this.instance.css({
  14.       "display" : "none",
  15.       "position" : "absolute",
  16.       "width" : "480px",
  17.       "height" : "70px",
  18.       'top' : '50%',
  19.       'left' : '50%',
  20.       'margin-left' : '-240px',
  21.       'margin-top' : '-35px',
  22.       "z-index" : 10000,
  23.       "background-color" : "transparent"
  24.   });
  25.   //this.addGradient(this.instance,"#B3B3B3","white");
  26.  
  27.   /*
  28.       "background-color" : "#1F2232",
  29.       "border-radius" : "3px",
  30.       "border":"1px solid #DCDCDC",
  31.       "box-shadow" : "2px 2px 2px #333333",
  32.       "-mz-box-shadow" : "2px 2px 2px #333333",
  33.       "-ms-box-shadow" : "2px 2px 2px #333333",
  34.       "-webkit-box-shadow" : "2px 2px 2px #333333",
  35.       "-o-box-shadow" : "2px 2px 2px #333333"
  36.   */
  37.  
  38.   this.proTitle.css({
  39.       "position" : "absolute",
  40.       "left" : "10px",
  41.       "top" : "10px",
  42.       "width" : "460px",
  43.       "text-align" : "center",
  44.       "font-family" : "Tahoma",
  45.       "font-size" : "24px",
  46.       "color" : "white",
  47.       "word-break" : "keep-all",
  48.       "white-space" : "nowrap",
  49.       "overflow" : "hidden",
  50.       "text-overflow" : "ellipsis"
  51.      
  52.   });
  53.  
  54.   this.proTitle.css({"text-shadow":"0 0 5px #8c97cb, 0 0 10px #8c97cb,0 0 15px #8c97cb"});       
  55.  
  56.   this.loadingBG.css({
  57.     "position" : "absolute",
  58.     "width" : "280px",
  59.     "height" : "10px",
  60.     "left" : "10px",
  61.     "top" : "35px",
  62.     "background-color" : "#F3F4F9",
  63.     "border-radius" : "2px",
  64.     "display":"none"
  65.   });
  66.  
  67.   this.loadingItem.css({
  68.       "position" : "absolute",
  69.       "width" : "0px",
  70.       "height" : "10px",
  71.       "left" : "0px",
  72.       "top" : "0px",
  73.       "background-color" : "#3FB5F2",
  74.       "border-radius" : "2px",
  75.       "display":"none"
  76.   });
  77.  
  78.   this.stepTitle.css({
  79.       "position" : "absolute",
  80.       "left" : "10px",
  81.       "top" : "50px",
  82.       "width" : "460px",
  83.       "text-align" : "center",
  84.       "font-family" : "Tahoma",
  85.       "font-size" : "12px",
  86.       "color" : this.loadingCaptionColor,
  87.       "word-break" : "keep-all",
  88.       "white-space" : "nowrap",
  89.       "overflow" : "hidden",
  90.       "text-overflow" : "ellipsis"
  91.   });
  92.  
  93.   //this.body.css({"background-color":this.backgroundColor});
  94.   this.initBackground();
  95.  
  96.   this.body.append(this.instance);
  97.   this.instance.append(this.proTitle);
  98.   this.instance.append(this.loadingBG);
  99.   this.instance.append(this.stepTitle);
  100.   this.loadingBG.append(this.loadingItem);
  101.  
  102.   this.init();  
  103.   this.addLoadingImage();
  104.  
  105.   this.show();
  106. }
  107.  
  108. LoadingJS.prototype = {
  109.       loadBookConfig : function(){
  110.      
  111.             this.loadingCaption, this.loadingCaptionColor, this.hasLoadingPicture, this.loadingPicture;
  112.            
  113.         try{
  114.             this.loadingCaption = bookConfig.loadingCaption?bookConfig.loadingCaption:"Loading";
  115.             this.loadingCaptionColor = bookConfig.loadingCaptionColor?bookConfig.loadingCaptionColor:"#DDDDDD";
  116.             this.loadingBackground = bookConfig.loadingBackground?bookConfig.loadingBackground:"#1F2232";
  117.            
  118.             this.loadingPicture = bookConfig.loadingPicture?bookConfig.loadingPicture:"";
  119.             this.hasLoadingPicture = (this.loadingPicture != "");
  120.         }catch(err){
  121.             this.loadingCaption = "Loading";
  122.             this.loadingCaptionColor = "#DDDDDD";
  123.            
  124.             this.hasLoadingPicture = false;
  125.             this.loadingPicture = "";
  126.         }
  127.        
  128.         //console.log("loadingPicture:%s", this.loadingPicture);
  129.        
  130.       },
  131.      
  132.       init: function(){
  133.             var doc = $(document);
  134.            
  135.             var windowWidth = doc.width(), windowHeight = Math.max(doc.height(),400), progressWidth = 480, progressHeight = 70;
  136.            
  137.             var progressLeft = (windowWidth - progressWidth) / 2, progressTop = (windowHeight - progressHeight) / 2;
  138.            
  139.             // this.instance.css({"left":progressLeft + "px", "top":progressTop + "px"});
  140.            
  141.             this.proTitle.text($(document).attr("title"));
  142.             this.stepTitle.text(this.loadingCaption + "...");
  143.            
  144.             var self = this,iWidth = 0,iStep = 2;
  145.             var oldColor = this.colorSplit("#3FB5F2");
  146.             this.timer = window.setInterval(function(){
  147.  
  148.                         /*var pAddR = Math.floor((255 - oldColor.r) * iWidth / 280),
  149.                             pAddG = Math.floor((255 - oldColor.g) * iWidth / 280),
  150.                             pAddB = Math.floor((255 - oldColor.b) * iWidth / 280);
  151.                        
  152.                         var newEndColor = self.colorAdd("#3FB5F2",pAddR,pAddG,pAddB);
  153.                         self.addGradient(self.loadingItem,"#3FB5F2",newEndColor);
  154.  
  155.                         self.loadingItem.css({width : iWidth +"px"});
  156.                         iWidth += iStep;
  157.                         if(iWidth == 280) iWidth = 0; */
  158.                        
  159.                         iWidth += iStep;
  160.                         var iCount = Math.floor(iWidth / 50) % 3;
  161.                        
  162.                         switch(iCount){
  163.                               case 0:{self.stepTitle.text(self.loadingCaption + ".  ");break;}
  164.                               case 1:{self.stepTitle.text(self.loadingCaption + ".. ");break;}
  165.                               case 2:{self.stepTitle.text(self.loadingCaption + "...");break;}
  166.                               default:break;
  167.                         }
  168.                        
  169.                        
  170.                   },40);
  171.       },
  172.       show: function(){
  173.             this.instance.css({"display":"block"});
  174.       },
  175.      
  176.       addLoadingImage : function(){
  177.             if(this.hasLoadingPicture == false) return;
  178.            
  179.             this.loadingImg = $("<img style='display:none;position:absolute;z-index:10000'></img>");
  180.  
  181.       var self = this;
  182.       this.loadingImg.load(function(){
  183.            
  184.             var doc = $(document), windowWidth = doc.width() , oImage = self.loadingImg[0];
  185.             var iImageWidth = oImage.naturalWidth, iImageHeight = oImage.naturalHeight;
  186.            
  187.             var iInstanceTop;
  188.             try{
  189.                   iInstanceTop = parseInt(self.instance.css("top").replace("px","")) + parseInt(self.instance.css("margin-top").replace("px",""));
  190.         }catch(err){
  191.             iInstanceTop = iImageHeight;
  192.         }
  193.        
  194.             var iLeft = (windowWidth - iImageWidth) / 2, iTop = iInstanceTop - iImageHeight;
  195.            
  196.             //console.log("image loaded, left:%d,top:%d,width:%d,height:%d",iLeft,iTop,iImageWidth,iImageHeight);
  197.  
  198.             self.loadingImg.css({
  199.                   "left" : iLeft + "px",
  200.                   "top" : iTop + "px",
  201.                   "width": iImageWidth + "px",
  202.                   "height": iImageHeight + "px",
  203.                   "display":"block"
  204.             });
  205.       });
  206.      
  207.       this.loadingImg.attr("src", this.loadingPicture);
  208.       this.body.append(this.loadingImg);
  209.       },
  210.      
  211.       destroy: function(){
  212.             window.clearInterval(this.timer);
  213.             this.body.css({"background-color":""});
  214.             this.instance.css({"display":"none","z-index":1});
  215.             this.instance.empty();
  216.             this.instance.remove();
  217.            
  218.             if(this.loadingImg){
  219.                   this.loadingImg.css({"display":"none","z-index":1});
  220.                   this.loadingImg.remove();
  221.             }
  222.       },
  223.       getBrowserType : function(){
  224.            
  225.             var isIE11 = function(){
  226.                   var userAgent = navigator.userAgent.toLowerCase();
  227.                   return (!$.browser.msie) && (userAgent.indexOf("trident") > 0);
  228.             };
  229.            
  230.             var browserType = 0;
  231.            
  232.             if($.browser.msie || isIE11()) {
  233.                   browserType = 3;
  234.             } else if($.browser.mozilla && !isIE11()) {
  235.                   browserType = 2;
  236.             } else if($.browser.safari) {
  237.                   browserType = 1;
  238.             } else if($.browser.opera) {
  239.                   browserType = 4;
  240.             };
  241.            
  242.             return browserType;
  243.       },
  244.       addGradient : function(item,beginColor, endColor){
  245.            
  246.  
  247.             var browserType = this.getBrowserType();
  248.  
  249.             var sLeft = "",sMsLeft="0";
  250.             var horz = true;
  251.             if(horz) {sLeft = "left,";sMsLeft="1";}
  252.            
  253.             item.css({background: "linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
  254.             switch(browserType){
  255.                   case 1:{
  256.                         item.css({background: "-webkit-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
  257.                         break;
  258.                   }
  259.                   case 2:{
  260.                         item.css({background: "-moz-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
  261.                         break;
  262.                   }
  263.                   case 3:{
  264.                         item.css({background: "-ms-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
  265.                         item.css("filter", "progid:DXImageTransform.Microsoft.Gradient(GradientType="+ sMsLeft +", EndColorStr=" +
  266.                   endColor + ", StartColorStr=" + beginColor + ")");                           
  267.                         break;
  268.                   }
  269.                   case 4:{
  270.                         item.css({background: "-o-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
  271.                         break;
  272.            
  273.                   }
  274.             }    
  275.      
  276.            
  277.       },
  278.       colorSplit : function(color){
  279.             var colorRGB = {r : 0, g : 0, b : 0};
  280.            
  281.             var red = "FF",green ="FF",blue = "FF";
  282.            
  283.             if(color.length == 7){
  284.      
  285.                   red = color.substr(1, 2);
  286.                   green = color.substr(3, 2);
  287.                   blue = color.substr(5, 2);         
  288.            
  289.             }else if(color.length == 4){
  290.                  
  291.                   red = color.substr(1, 1);
  292.                   green = color.substr(2, 1);
  293.                   blue = color.substr(3, 1);
  294.                  
  295.                   red += red;
  296.                   green += green;
  297.                   blue += blue;
  298.      
  299.             }
  300.             colorRGB.r = parseInt(red,16);
  301.             colorRGB.g = parseInt(green,16);
  302.             colorRGB.b = parseInt(blue,16);
  303.            
  304.             return colorRGB;
  305.       },
  306.      
  307.       colorAdd :function(color, addR, addG, addB){
  308.             var colorRGB = this.colorSplit(color);
  309.             colorRGB.r = Math.min(colorRGB.r + addR, 255).toString(16);
  310.             colorRGB.g = Math.min(colorRGB.g + addG, 255).toString(16);
  311.             colorRGB.b = Math.min(colorRGB.b + addB, 255).toString(16);
  312.             colorRGB.r = (colorRGB.r.length <= 1) ? '0' + colorRGB.r : colorRGB.r;
  313.             colorRGB.g = (colorRGB.g.length <= 1) ? '0' + colorRGB.g : colorRGB.g;
  314.             colorRGB.b = (colorRGB.b.length <= 1) ? '0' + colorRGB.b : colorRGB.b;
  315.             return '#' + colorRGB.r + colorRGB.g + colorRGB.b;
  316.       },
  317.       initStatus : function(){
  318.             window.clearInterval(this.timer);
  319.             //this.stepTitle.text("Initialization...");
  320.       },
  321.       initBackground : function(){
  322.            
  323.             this.body.css({"background-color":this.loadingBackground});
  324.            
  325.             /*var beginColor,endColor,angle;
  326.            
  327.             try{
  328.                   beginColor = bookConfig.bgBeginColor;
  329.                   endColor = bookConfig.bgEndColor;
  330.                   angle = bookConfig.bgMRotation;
  331.             }catch(err){
  332.                   beginColor = "#1F2232";
  333.                   endColor = "#1F2232";
  334.                   angle = 90;
  335.             }
  336.            
  337.             if(beginColor == undefined) beginColor = "#1F2232";
  338.             if(endColor == undefined) endColor = "#1F2232";
  339.             if(angle == undefined) angle = 90;
  340.            
  341.             var angleStr = "0% 0%,100% 0%";
  342.             switch(angle) {
  343.                   case 45:
  344.                         angleStr = "0% 0%,100% 100%";
  345.                         break;
  346.                   case 90:
  347.                         angleStr = "0% 0%,0% 100%";
  348.                         break;
  349.                   case 135:
  350.                         angleStr = "100% 0%,0% 100%";
  351.                         break;
  352.                   case 180:
  353.                         angleStr = "100% 0%,0% 0%";
  354.                   case 0:
  355.                         angleStr = "0% 0%,100% 0%";
  356.                         break;
  357.             }
  358.            
  359.             var browserType = this.getBrowserType();
  360.            
  361.            
  362.             if(browserType == 1) {
  363.                   this.body.css("background-image", "-webkit-gradient(linear," + angleStr + ",from(" + beginColor + "),to(" + endColor + "))");
  364.                  
  365.             } else if(browserType == 2) {
  366.                   this.body.css("background-image", "-moz-linear-gradient(left " + _angle + "deg," + beginColor + "," + endColor + ")");
  367.      
  368.             } else if(browserType == 3) {
  369.                   this.body.css("filter", "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr=" +
  370.                         endColor + ", StartColorStr=" + beginColor + ");");
  371.             };*/
  372.            
  373.       }
  374. };
  375.  
  376. var jsLoadingBar = new LoadingJS();

Raw Paste


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