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. })();