☰

Furaffinity-Loading-Animations

Library for creating different loading animations on Furaffinity

当前为 2024-01-23 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/485153/1316285/Furaffinity-Loading-Animations.js 

  1. // ==UserScript==
  2. // @name        Furaffinity-Loading-Animations
  3. // @namespace   Violentmonkey Scripts
  4. // @grant       none
  5. // @version     1.1.3
  6. // @author      Midori Dragon
  7. // @description Library for creating different loading animations on Furaffinity
  8. // @icon        https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png?v2
  9. // @homepageURL https://greasyfork.org/de/scripts/485153-furaffinity-loading-animations
  10. // @supportURL  https://greasyfork.org/de/scripts/485153-furaffinity-loading-animations/feedback
  11. // @license     MIT
  12. // ==/UserScript==
  13.  
  14. (() => {
  15.     class LoadingSpinner {
  16.         constructor(baseElem) {
  17.             this._delay = 1000;
  18.             this._size = 60;
  19.             this._spinnerThickness = 4;
  20.             this._spinnerLength = 1;
  21.             this._linearSpin = false;
  22.             this._forecolorHex = "#8941de";
  23.             this._backcolorHex = "#f3f3f3";
  24.             this._visible = false;
  25.             this._baseElem;
  26.             this.animationCurve = "cubic-bezier(.53,.24,.46,.83)";
  27.             this.spinner;
  28.             this.spinnerContainer;
  29.             this.baseElem = baseElem;
  30.         }
  31.  
  32.         set baseElem(value) {
  33.             if (this._baseElem == value) return;
  34.             this._baseElem = value;
  35.  
  36.             if (this.spinnerContainer)
  37.                 this.spinnerContainer.parentNode.removeChild(this.spinnerContainer);
  38.  
  39.             if (!document.getElementById("flaspinnerstyle")) {
  40.                 const style = document.createElement("style");
  41.                 style.id = "flaspinnerstyle";
  42.                 style.type = "text/css";
  43.                 style.innerHTML = "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }";
  44.                 document.head.appendChild(style);
  45.             }
  46.  
  47.             this.spinnerContainer = document.createElement("div");
  48.             this.spinnerContainer.className = "fla-spinner-container";
  49.             this.spinnerContainer.style.position = "relative";
  50.             this.spinnerContainer.style.width = this.size + "px";
  51.             this.spinnerContainer.style.height = this.size + "px";
  52.             this.spinnerContainer.style.left = "50%";
  53.             this.spinnerContainer.style.transform = "translateX(-50%)";
  54.             this.spinnerContainer.style.display = "none";
  55.  
  56.             this.spinner = document.createElement("div");
  57.             this.spinner.className = "fla-spinner";
  58.             this.updateSpinnerBorders();
  59.             this.spinner.style.borderRadius = "50%";
  60.             this.spinner.style.position = "relative";
  61.             this.spinner.style.width = (this.size - this.spinnerThickness * 2) + "px";
  62.             this.spinner.style.height = (this.size - this.spinnerThickness * 2) + "px";
  63.             this.spinner.style.animation = `spin ${this.delay / 1000}s ${this.animationCurve} infinite`;
  64.  
  65.             this.spinnerContainer.appendChild(this.spinner);
  66.             this._baseElem.appendChild(this.spinnerContainer);
  67.         }
  68.         get baseElem() {
  69.             return this._baseElem;
  70.         }
  71.  
  72.         set delay(value) {
  73.             if (this._delay == value) return;
  74.             this._delay = +value;
  75.             if (this.spinner)
  76.                 this.spinner.style.animation = `spin ${this._delay / 1000}s ${this.animationCurve} infinite`;
  77.         }
  78.         get delay() {
  79.             return this._delay;
  80.         }
  81.  
  82.         set linearSpin(value) {
  83.             if (this._linearSpin == value) return;
  84.             this._linearSpin = value;
  85.  
  86.             this.animationCurve = this._linearSpin == true ? "linear" : "cubic-bezier(.53,.24,.46,.83)";
  87.  
  88.             if (this.spinner)
  89.                 this.spinner.style.animation = `spin ${this.delay / 1000}s ${this.animationCurve} infinite`;
  90.         }
  91.         get linearSpin() {
  92.             return this._linearSpin;
  93.         }
  94.  
  95.         set size(value) {
  96.             if (this._size == value) return;
  97.             this._size = +value;
  98.  
  99.             if (this.spinnerContainer) {
  100.                 this.spinnerContainer.style.width = this._size + "px";
  101.                 this.spinnerContainer.style.height = this._size + "px";
  102.             }
  103.             if (this.spinner) {
  104.                 this.spinner.style.width = (this.size - this.spinnerThickness * 2) + "px";
  105.                 this.spinner.style.height = (this.size - this.spinnerThickness * 2) + "px";
  106.             }
  107.         }
  108.         get size() {
  109.             return this._size;
  110.         }
  111.  
  112.         set spinnerThickness(value) {
  113.             if (this._spinnerThickness == value) return;
  114.             this._spinnerThickness = +value;
  115.  
  116.             this.updateSpinnerBorders();
  117.         }
  118.         get spinnerThickness() {
  119.             return this._spinnerThickness;
  120.         }
  121.  
  122.         set spinnerLength(value) {
  123.             if (this._spinnerLength == value) return;
  124.             this._spinnerLength = +value;
  125.  
  126.             this.updateSpinnerBorders();
  127.         }
  128.         get spinnerLength() {
  129.             return this._spinnerLength;
  130.         }
  131.  
  132.         set forecolorHex(value) {
  133.             if (this._forecolorHex == value) return;
  134.             this._forecolorHex = value;
  135.  
  136.             this.updateSpinnerBorders();
  137.         }
  138.         get forecolorHex() {
  139.             return this._forecolorHex;
  140.         }
  141.  
  142.         set backcolorHex(value) {
  143.             if (this._backcolorHex == value) return;
  144.             this._backcolorHex = value;
  145.  
  146.             this.updateSpinnerBorders();
  147.         }
  148.         get backcolorHex() {
  149.             return this._backcolorHex;
  150.         }
  151.  
  152.         set visible(value) {
  153.             if (this._visible == value) return;
  154.             this._visible = value;
  155.  
  156.             if (this.spinnerContainer)
  157.                 this.spinnerContainer.style.display = this._visible == true ? "block" : "none";
  158.         }
  159.         get visible() {
  160.             return this._visible;
  161.         }
  162.  
  163.         updateSpinnerBorders() {
  164.             if (this.spinner) {
  165.                 this.spinner.style.border = this.spinnerThickness + "px solid " + this.backcolorHex;
  166.                 if (this.spinnerLength >= 1)
  167.                     this.spinner.style.borderTop = this.spinnerThickness + "px solid " + this._forecolorHex;
  168.                 if (this.spinnerLength >= 2)
  169.                     this.spinner.style.borderRight = this.spinnerThickness + "px solid " + this._forecolorHex;
  170.                 if (this.spinnerLength >= 3)
  171.                     this.spinner.style.borderBottom = this.spinnerThickness + "px solid " + this._forecolorHex;
  172.                 if (this.spinnerLength >= 4)
  173.                     this.spinner.style.borderLeft = this.spinnerThickness + "px solid " + this._forecolorHex;
  174.             }
  175.         }
  176.     }
  177.     window.LoadingSpinner = LoadingSpinner;
  178.  
  179.     class LoadingTextSpinner {
  180.         constructor(baseElem) {
  181.             this.characters = ["◜", "◠", "◝", "◞", "◡", "◟"];
  182.             this.delay = 600;
  183.             this.spinner;
  184.             this._visible = false;
  185.             this._fontSize = 15;
  186.             this._currIndex = -1;
  187.             this._intervalId;
  188.             this._baseElemText = baseElem.textContent;
  189.             this._baseElem;
  190.             this.baseElem = baseElem;
  191.         }
  192.  
  193.         set baseElem(value) {
  194.             if (this._baseElem == value) return;
  195.             this._baseElem = value;
  196.  
  197.             if (this.spinner)
  198.                 this.spinner.parentNode.removeChild(this.spinner);
  199.  
  200.             this.spinner = document.createElement("div");
  201.             this.spinner.className = "fla-text-spinner";
  202.             if (this.fontSize)
  203.                 this.spinner.style.fontSize = this.fontSize + "px";
  204.             this._baseElemText = this._baseElem.textContent;
  205.             this._baseElem.appendChild(this.spinner);
  206.         }
  207.         get baseElem() {
  208.             return this._baseElem;
  209.         }
  210.  
  211.         set fontSize(value) {
  212.             if (this._fontSize == value) return;
  213.             this._fontSize = value;
  214.  
  215.             if (this.spinner) {
  216.                 if (this._fontSize)
  217.                     this.spinner.style.fontSize = this._fontSize + "px";
  218.                 else
  219.                     this.spinner.style.fontSize = "";
  220.             }
  221.         }
  222.         get fontSize() {
  223.             return this._fontSize;
  224.         }
  225.  
  226.         set visible(value) {
  227.             if (this._visible == value) return;
  228.             this._visible = value;
  229.  
  230.             if (this.spinner)
  231.                 this.spinner.style.display = this._visible == true ? "block" : "none";
  232.  
  233.             let run;
  234.             if (this._visible) {
  235.                 run = true;
  236.                 this.baseElem.textContent = "⠀";
  237.                 this.baseElem.appendChild(this.spinner);
  238.                 this.spinner.textContent = this.characters[0];
  239.                 this._intervalId = setInterval(() => {
  240.                     if (this._currIndex >= this.characters.length)
  241.                         this._currIndex = 0;
  242.                     if (run == true) {
  243.                         this.spinner.textContent = this.characters[this._currIndex];
  244.                         this._currIndex++;
  245.                     }
  246.                 }, (this.delay / this.characters.length));
  247.             } else {
  248.                 run = false;
  249.                 clearInterval(this._intervalId);
  250.                 this.baseElem.textContent = this._baseElemText;
  251.             }
  252.         }
  253.         get visible() {
  254.             return this._visible;
  255.         }
  256.     }
  257.     window.LoadingTextSpinner = LoadingTextSpinner;
  258.  
  259.     class LoadingImage {
  260.         constructor(baseElem) {
  261.             this.delay = 100;
  262.             this.doScaleImage = true;
  263.             this.scaleChange = 0.05;
  264.             this.scaleChangeMax = 1.2;
  265.             this.scaleChangeMin = 0.8;
  266.             this.doRotateImage = true;
  267.             this.rotadeDegrees = 5;
  268.             this.image;
  269.             this.imageContainer;
  270.             this._visible = false;
  271.             this._imageSrc = "https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png";
  272.             this.isGrowing = true;
  273.             this.scale = 1;
  274.             this.rotation = 0;
  275.             this._size = 60;
  276.             this._intervalId;
  277.             this._baseElem;
  278.             this.baseElem = baseElem;
  279.         }
  280.  
  281.         set baseElem(value) {
  282.             if (this._baseElem == value) return;
  283.             this._baseElem = value;
  284.  
  285.             if (this.image)
  286.                 this.image.parentNode.removeChild(this.image);
  287.  
  288.             this.imageContainer = document.createElement("div");
  289.             this.imageContainer.className = "fla-loading-image-container";
  290.             this.imageContainer.style.position = "relative";
  291.             this.imageContainer.style.width = this.size + "px";
  292.             this.imageContainer.style.height = this.size + "px";
  293.             this.imageContainer.style.left = "50%";
  294.             this.imageContainer.style.transform = "translateX(-50%)";
  295.             this.imageContainer.style.display = "none";
  296.  
  297.             this.image = document.createElement("img");
  298.             this.image.className = "fla-loading-image";
  299.             this.image.src = this.imageSrc;
  300.             this.image.style.width = "100%";
  301.             this.image.style.height = "100%";
  302.             this.image.style.transition = "transform 0.5s ease-in-out";
  303.  
  304.             this.imageContainer.appendChild(this.image);
  305.             this._baseElem.appendChild(this.imageContainer);
  306.         }
  307.         get baseElem() {
  308.             return this._baseElem;
  309.         }
  310.  
  311.         set imageSrc(value) {
  312.             if (this._imageSrc == value) return;
  313.             this._imageSrc = value;
  314.  
  315.             if (this.image)
  316.                 this.image.src = this._imageSrc;
  317.         }
  318.         get imageSrc() {
  319.             return this._imageSrc;
  320.         }
  321.  
  322.         set size(value) {
  323.             if (this._size == value) return;
  324.             this._size = value;
  325.  
  326.             if (this.imageContainer) {
  327.                 this.imageContainer.style.width = this._size + "px";
  328.                 this.imageContainer.style.height = this._size + "px";
  329.             }
  330.         }
  331.         get size() {
  332.             return this._size;
  333.         }
  334.  
  335.         set visible(value) {
  336.             if (this._visible == value) return;
  337.             this._visible = value;
  338.  
  339.             if (this.imageContainer)
  340.                 this.imageContainer.style.display = this._visible == true ? "block" : "none";
  341.  
  342.             if (this._visible == true) {
  343.                 this._intervalId = setInterval(() => {
  344.                     this.updateAnimationFrame();
  345.                 }, this.delay);
  346.             } else
  347.                 clearInterval(this._intervalId);
  348.         }
  349.         get visible() {
  350.             return this._visible;
  351.         }
  352.  
  353.         updateAnimationFrame() {
  354.             if (this.isGrowing == true) {
  355.                 this.scale += this.scaleChange;
  356.                 this.rotation += this.rotadeDegrees;
  357.             } else {
  358.                 this.scale -= this.scaleChange;
  359.                 this.rotation -= this.rotadeDegrees;
  360.             }
  361.  
  362.             if (this.scale >= this.scaleChangeMax || this.scale <= this.scaleChangeMin)
  363.                 this.isGrowing = !this.isGrowing;
  364.  
  365.             this.image.style.transform = `scale(${this.scale}) rotate(${this.rotation}deg)`;
  366.         }
  367.     }
  368.     window.LoadingImage = LoadingImage;
  369.  
  370.     class ProgressBar {
  371.         constructor(baseElem) {
  372.             this.progressBarContainer;
  373.             this.progressBarChild;
  374.             this.progressBarShrinker;
  375.             this.progressBarText;
  376.             this.text;
  377.             this.showPercent = false;
  378.             this._imageSrc;
  379.             this._visible = false;
  380.             this._gradient = "linear-gradient(90deg, rgba(255,10,3,1) 0%, rgba(255,139,6,1) 16%, rgba(253,228,11,1) 36%, rgba(127,236,12,1) 59%, rgba(32,225,207,1) 75%, rgba(140,60,223,1) 95%)";
  381.             this._backcolorHex = "#000000";
  382.             this._height = 60;
  383.             this._fontSize = 15;
  384.             this._cornerRadius = 0;
  385.             this._baseElem;
  386.             this.baseElem = baseElem;
  387.         }
  388.  
  389.         set baseElem(value) {
  390.             if (this._baseElem == value) return;
  391.             this._baseElem = value;
  392.  
  393.             if (this.progressBarContainer)
  394.                 this.progressBarContainer.parentNode.removeChild(this.progressBarContainer);
  395.  
  396.             if (!document.getElementById("flaprogressstyle")) {
  397.                 const style = document.createElement("style");
  398.                 style.id = "flaprogressstyle";
  399.                 style.type = "text/css";
  400.                 style.innerHTML = `
  401.                 .fla-progressbar-container {
  402.                     width: 100%;
  403.                     position: relative;
  404.                     overflow: hidden;
  405.                 }
  406.  
  407.                 .fla-progress {
  408.                     color: white;
  409.                     text-align: center;
  410.                     line-height: 60px;
  411.                     font-size: 35px;
  412.                     font-family: "Segoe UI";
  413.                     width: 100%;
  414.                     height: 100%;
  415.                     position: absolute;
  416.                     background-size: cover;
  417.                 }
  418.  
  419.                 .fla-shrinker {
  420.                     position: absolute;
  421.                     top: 0;
  422.                     right: 0;
  423.                     transition: width 0.5s ease;
  424.                     width: 100%;
  425.                     height: 100%;
  426.                 }
  427.  
  428.                 .fla-progressbar-text {
  429.                     color: white;
  430.                     position: absolute;
  431.                     width: 100%;
  432.                     text-align: center;
  433.                     left: 50%;
  434.                     transform: translateX(-50%);
  435.                     text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
  436.                 }`;
  437.                 document.head.appendChild(style);
  438.             }
  439.  
  440.             this.progressBarContainer = document.createElement("div");
  441.             this.progressBarContainer.className = "fla-progressbar-container";
  442.             this.progressBarContainer.style.height = this.height + "px";
  443.             this.progressBarContainer.style.display = "none";
  444.  
  445.             this.progressBarChild = document.createElement("div");
  446.             this.progressBarChild.className = "fla-progress";
  447.             this.progressBarChild.style.background = this.gradient;
  448.             if (this.imageSrc)
  449.                 this.progressBarChild.style.backgroundImage = "url(" + this.imageSrc + ")";
  450.  
  451.             this.progressBarShrinker = document.createElement("div");
  452.             this.progressBarShrinker.className = "fla-shrinker";
  453.             this.progressBarShrinker.style.backgroundColor = this.backcolorHex;
  454.  
  455.             this.progressBarText = document.createElement("span");
  456.             this.progressBarText.className = "fla-progressbar-text";
  457.             this.progressBarText.style.lineHeight = this.height + "px";
  458.  
  459.             this.progressBarContainer.appendChild(this.progressBarChild);
  460.             this.progressBarContainer.appendChild(this.progressBarShrinker);
  461.             this.progressBarContainer.appendChild(this.progressBarText);
  462.             this._baseElem.appendChild(this.progressBarContainer);
  463.         }
  464.         get baseElem() {
  465.             return this._baseElem;
  466.         }
  467.  
  468.         set cornerRadius(value) {
  469.             if (this._cornerRadius == value) return;
  470.             this._cornerRadius = value;
  471.  
  472.             if (this.progressBarContainer)
  473.                 this.progressBarContainer.style.borderRadius = this.cornerRadius + "px";
  474.         }
  475.         get cornerRadius() {
  476.             return this._cornerRadius;
  477.         }
  478.  
  479.         set height(value) {
  480.             if (this._height == value) return;
  481.             this._height = value;
  482.  
  483.             if (this.progressBarContainer)
  484.                 this.progressBarContainer.style.height = this._height + "px";
  485.             if (this.progressBarText)
  486.                 this.progressBarText.style.lineHeight = this._height + "px";
  487.         }
  488.         get height() {
  489.             return this._height;
  490.         }
  491.  
  492.         set fontSize(value) {
  493.             if (this._fontSize == value) return;
  494.             this._fontSize = value;
  495.  
  496.             if (this.progressBarText) {
  497.                 if (this._fontSize)
  498.                     this.progressBarText.style.fontSize = this._fontSize + "px";
  499.                 else
  500.                     this.progressBarText.style.fontSize = "";
  501.             }
  502.         }
  503.         get fontSize() {
  504.             return this._fontSize;
  505.         }
  506.  
  507.         set gradient(value) {
  508.             if (this._gradient == value) return;
  509.             this._gradient = value;
  510.  
  511.             if (this.progressBarChild)
  512.                 this.progressBarChild.style.background = this._gradient;
  513.         }
  514.         get gradient() {
  515.             return this._gradient;
  516.         }
  517.  
  518.         set backcolorHex(value) {
  519.             if (this._backcolorHex == value) return;
  520.             this._backcolorHex = value;
  521.  
  522.             if (this.progressBarShrinker)
  523.                 this.progressBarShrinker.style.backgroundColor = this._backcolorHex;
  524.         }
  525.         get backcolorHex() {
  526.             return this._backcolorHex;
  527.         }
  528.  
  529.         set imageSrc(value) {
  530.             if (this._imageSrc == value) return;
  531.             this._imageSrc = value;
  532.  
  533.             if (this.progressBarChild) {
  534.                 if (this._imageSrc)
  535.                     this.progressBarChild.style.backgroundImage = "url(" + this._imageSrc + ")";
  536.                 else
  537.                     this.progressBarChild.style.backgroundImage = "";
  538.             }
  539.         }
  540.         get imageSrc() {
  541.             return this._imageSrc;
  542.         }
  543.  
  544.         set visible(value) {
  545.             if (this._visible == value) return;
  546.             this._visible = value;
  547.  
  548.             if (this.progressBarContainer)
  549.                 this.progressBarContainer.style.display = this._visible == true ? "block" : "none";
  550.         }
  551.         get visible() {
  552.             return this._visible;
  553.         }
  554.  
  555.         update(value) {
  556.             value = +value;
  557.             if (value > 100)
  558.                 value = 100;
  559.             else if (value < 0)
  560.                 value = 0;
  561.             this.progressBarShrinker.style.width = (100 - value) + '%';
  562.             this.progressBarText.textContent = (this.text ? this.text : "") + (this.showPercent == true ? value.toString() + "%" : "");
  563.         }
  564.     }
  565.     window.ProgressBar = ProgressBar;
  566.  
  567.     class LoadingBar {
  568.         constructor(baseElem) {
  569.             this.loadingBar;
  570.             this._delay = 2000;
  571.             this._text;
  572.             this._height = 60;
  573.             this._fontSize = 15;
  574.             this._cornerRadius = 0;
  575.             this._gradient = "repeating-linear-gradient(to right, rgba(255,10,3,1) 0%, rgba(255,139,6,1) 8%, rgba(253,228,11,1) 16%, rgba(127,236,12,1) 26%, rgba(32,225,207,1) 36%, rgba(140,60,223,1) 46%, rgba(140,60,223,1) 54%, rgba(32,225,207,1) 64%, rgba(127,236,12,1) 74%, rgba(253,228,11,1) 84%, rgba(255,139,6,1) 92%, rgba(255,10,3,1) 100%)";
  576.             this._baseElem;
  577.             this._visible = false;
  578.             this.baseElem = baseElem;
  579.         }
  580.  
  581.         set baseElem(value) {
  582.             if (this._baseElem == value) return;
  583.             this._baseElem = value;
  584.  
  585.             if (this.loadingBar)
  586.                 this.loadingBar.parentNode.removeChild(this.loadingBar);
  587.  
  588.             if (!document.getElementById("flaloadingbarstyle")) {
  589.                 const style = document.createElement("style");
  590.                 style.id = "flaloadingbarstyle";
  591.                 style.type = "text/css";
  592.                 style.innerHTML = "@keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }";
  593.                 document.head.appendChild(style);
  594.             }
  595.  
  596.             this.loadingBar = document.createElement("div");
  597.             this.loadingBar.className = "fla-loadingbar";
  598.             this.loadingBar.textContent = this.text;
  599.             this.loadingBar.style.width = "100%";
  600.             this.loadingBar.style.height = this.height + "px";
  601.             this.loadingBar.style.lineHeight = this.height + "px";
  602.             this.loadingBar.style.textShadow = "-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000";
  603.             this.loadingBar.style.background = this.gradient;
  604.             this.loadingBar.style.backgroundSize = "200% auto";
  605.             this.loadingBar.style.backgroundPosition = "0 100%";
  606.             this.loadingBar.style.animation = `gradient ${(this.delay / 1000)}s infinite`;
  607.             this.loadingBar.style.animationFillMode = "forwards";
  608.             this.loadingBar.style.animationTimingFunction = "linear";
  609.             this.loadingBar.style.display = "none";
  610.  
  611.             this._baseElem.appendChild(this.loadingBar);
  612.         }
  613.         get baseElem() {
  614.             return this._baseElem;
  615.         }
  616.  
  617.         set delay(value) {
  618.             if (this._delay == value) return;
  619.             this._delay = value;
  620.  
  621.             if (this.loadingBar)
  622.                 this.loadingBar.style.animation = `gradient ${(this._delay / 1000)}s infinite`;
  623.         }
  624.         get delay() {
  625.             return this._delay;
  626.         }
  627.  
  628.         set text(value) {
  629.             if (this._text == value) return;
  630.             this._text = value;
  631.  
  632.             if (this.loadingBar)
  633.                 this.loadingBar.textContent = this._text;
  634.         }
  635.         get text() {
  636.             return this._text;
  637.         }
  638.  
  639.         set cornerRadius(value) {
  640.             if (this._cornerRadius == value) return;
  641.             this._cornerRadius = value;
  642.  
  643.             if (this.loadingBar)
  644.                 this.loadingBar.style.borderRadius = this.cornerRadius + "px";
  645.         }
  646.         get cornerRadius() {
  647.             return this._cornerRadius;
  648.         }
  649.  
  650.         set height(value) {
  651.             if (this._height == value) return;
  652.             this._height = value;
  653.  
  654.             if (this.loadingBar) {
  655.                 this.loadingBar.style.height = this._height + "px";
  656.                 this.loadingBar.style.lineHeight = this._height + "px";
  657.             }
  658.         }
  659.         get height() {
  660.             return this._height;
  661.         }
  662.  
  663.         set fontSize(value) {
  664.             if (this._fontSize == value) return;
  665.             this._fontSize = value;
  666.  
  667.             if (this.loadingBar) {
  668.                 if (this._fontSize)
  669.                     this.loadingBar.style.fontSize = this._fontSize + "px";
  670.                 else
  671.                     this.loadingBar.style.fontSize = "";
  672.             }
  673.         }
  674.         get fontSize() {
  675.             return this._fontSize;
  676.         }
  677.  
  678.         set gradient(value) {
  679.             if (this._gradient == value) return;
  680.             this._gradient = value;
  681.  
  682.             if (this.loadingBar)
  683.                 this.loadingBar.style.background = this._gradient;
  684.         }
  685.         get gradient() {
  686.             return this._gradient;
  687.         }
  688.  
  689.         set visible(value) {
  690.             if (this._visible == value) return;
  691.             this._visible = value;
  692.  
  693.             if (this.loadingBar)
  694.                 this.loadingBar.style.display = this._visible == true ? "block" : "none";
  695.         }
  696.         get visible() {
  697.             return this._visible;
  698.         }
  699.     }
  700.     window.LoadingBar = LoadingBar;
  701. })();