您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Library for creating different loading animations on Furaffinity
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.greatest.deepsurf.us/scripts/485153/1313506/Furaffinity-Loading-Animations.js
// ==UserScript== // @name Furaffinity-Loading-Animations // @namespace Violentmonkey Scripts // @grant none // @version 1.0.0 // @author Midori Dragon // @description Library for creating different loading animations on Furaffinity // @icon https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png?v2 // @homepageURL // @supportURL // @license MIT // ==/UserScript== (() => { class LoadingSpinner { constructor(baseElem) { this._delay = 1000; this._size = 60; this._spinnerThickness = 4; this._spinnerLength = 1; this._linearSpin = false; this._forecolorHex = "#8941de"; this._backcolorHex = "#f3f3f3"; this._visible = false; this._baseElem; this.animationCurve = "cubic-bezier(.53,.24,.46,.83)"; this.spinner; this.spinnerContainer; this.baseElem = baseElem; } set baseElem(value) { if (this._baseElem == value) return; this._baseElem = value; if (this.spinnerContainer) this.spinnerContainer.parentNode.removeChild(this.spinnerContainer); if (!document.getElementById("flaspinnerstyle")) { const style = document.createElement("style"); style.id = "flaspinnerstyle"; style.type = "text/css"; style.innerHTML = "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"; document.head.appendChild(style); } this.spinnerContainer = document.createElement("div"); this.spinnerContainer.className = "fla-spinner-container"; this.spinnerContainer.style.position = "relative"; this.spinnerContainer.style.width = this.size + "px"; this.spinnerContainer.style.height = this.size + "px"; this.spinnerContainer.style.left = "50%"; this.spinnerContainer.style.transform = "translateX(-50%)"; this.spinnerContainer.style.display = "none"; this.spinner = document.createElement("div"); this.spinner.className = "fla-spinner"; this.updateSpinnerBorders(); this.spinner.style.borderRadius = "50%"; this.spinner.style.position = "relative"; this.spinner.style.width = (this.size - this.spinnerThickness * 2) + "px"; this.spinner.style.height = (this.size - this.spinnerThickness * 2) + "px"; this.spinner.style.animation = `spin ${this.delay / 1000}s ${this.animationCurve} infinite`; this.spinnerContainer.appendChild(this.spinner); this._baseElem.appendChild(this.spinnerContainer); } get baseElem() { return this._baseElem; } set delay(value) { if (this._delay == value) return; this._delay = +value; if (this.spinner) this.spinner.style.animation = `spin ${this._delay / 1000}s ${this.animationCurve} infinite`; } get delay() { return this._delay; } set linearSpin(value) { if (this._linearSpin == value) return; this._linearSpin = value; this.animationCurve = this._linearSpin == true ? "linear" : "cubic-bezier(.53,.24,.46,.83)"; if (this.spinner) this.spinner.style.animation = `spin ${this.delay / 1000}s ${this.animationCurve} infinite`; } get linearSpin() { return this._linearSpin; } set size(value) { if (this._size == value) return; this._size = +value; if (this.spinnerContainer) { this.spinnerContainer.style.width = this._size + "px"; this.spinnerContainer.style.height = this._size + "px"; } if (this.spinner) { this.spinner.style.width = (this.size - this.spinnerThickness * 2) + "px"; this.spinner.style.height = (this.size - this.spinnerThickness * 2) + "px"; } } get size() { return this._size; } set spinnerThickness(value) { if (this._spinnerThickness == value) return; this._spinnerThickness = +value; this.updateSpinnerBorders(); } get spinnerThickness() { return this._spinnerThickness; } set spinnerLength(value) { if (this._spinnerLength == value) return; this._spinnerLength = +value; this.updateSpinnerBorders(); } get spinnerLength() { return this._spinnerLength; } set forecolorHex(value) { if (this._forecolorHex == value) return; this._forecolorHex = value; this.updateSpinnerBorders(); } get forecolorHex() { return this._forecolorHex; } set backcolorHex(value) { if (this._backcolorHex == value) return; this._backcolorHex = value; this.updateSpinnerBorders(); } get backcolorHex() { return this._backcolorHex; } set visible(value) { if (this._visible == value) return; this._visible = value; if (this.spinnerContainer) this.spinnerContainer.style.display = this._visible == true ? "block" : "none"; } get visible() { return this._visible; } updateSpinnerBorders() { if (this.spinner) { this.spinner.style.border = this.spinnerThickness + "px solid " + this.backcolorHex; if (this.spinnerLength >= 1) this.spinner.style.borderTop = this.spinnerThickness + "px solid " + this._forecolorHex; if (this.spinnerLength >= 2) this.spinner.style.borderRight = this.spinnerThickness + "px solid " + this._forecolorHex; if (this.spinnerLength >= 3) this.spinner.style.borderBottom = this.spinnerThickness + "px solid " + this._forecolorHex; if (this.spinnerLength >= 4) this.spinner.style.borderLeft = this.spinnerThickness + "px solid " + this._forecolorHex; } } } window.LoadingSpinner = LoadingSpinner; class LoadingTextSpinner { constructor(baseElem) { this.characters = ["◜", "◠", "◝", "◞", "◡", "◟"]; this.delay = 600; this.spinner; this._visible = false; this._fontSize = 15; this._currIndex = -1; this._intervalId; this._baseElem; this.baseElem = baseElem; } set baseElem(value) { if (this._baseElem == value) return; this._baseElem = value; if (this.spinner) this.spinner.parentNode.removeChild(this.spinner); this.spinner = document.createElement("div"); this.spinner.className = "fla-text-spinner"; this.spinner.style.margin = "4px"; if (this.fontSize) this.spinner.style.fontSize = this.fontSize + "px"; this._baseElem.appendChild(this.spinner); } get baseElem() { return this._baseElem; } set fontSize(value) { if (this._fontSize == value) return; this._fontSize = value; if (this.spinner) { if (this._fontSize) this.spinner.style.fontSize = this._fontSize + "px"; else this.spinner.style.fontSize = ""; } } get fontSize() { return this._fontSize; } set visible(value) { if (this._visible == value) return; this._visible = value; if (this.spinner) this.spinner.style.display = this._visible == true ? "block" : "none"; if (this._visible) { this._intervalId = setInterval(() => { if (this._currIndex >= this.characters.length) this._currIndex = 0; this.spinner.textContent = this.characters[this._currIndex]; this._currIndex++; }, (this.delay / this.characters.length)); } else clearInterval(this._intervalId); } get visible() { return this._visible; } } window.LoadingTextSpinner = LoadingTextSpinner; class LoadingImage { constructor(baseElem) { this.delay = 100; this.doScaleImage = true; this.scaleChange = 0.05; this.scaleChangeMax = 1.2; this.scaleChangeMin = 0.8; this.doRotateImage = true; this.rotadeDegrees = 5; this.image; this.imageContainer; this._visible = false; this._imageSrc = "https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png"; this.isGrowing = true; this.scale = 1; this.rotation = 0; this._size = 60; this._intervalId; this._baseElem; this.baseElem = baseElem; } set baseElem(value) { if (this._baseElem == value) return; this._baseElem = value; if (this.image) this.image.parentNode.removeChild(this.image); this.imageContainer = document.createElement("div"); this.imageContainer.className = "fla-loading-image-container"; this.imageContainer.style.position = "relative"; this.imageContainer.style.width = this.size + "px"; this.imageContainer.style.height = this.size + "px"; this.imageContainer.style.left = "50%"; this.imageContainer.style.transform = "translateX(-50%)"; this.imageContainer.style.display = "none"; this.image = document.createElement("img"); this.image.className = "fla-loading-image"; this.image.src = this.imageSrc; this.image.style.width = "100%"; this.image.style.height = "100%"; this.image.style.transition = "transform 0.5s ease-in-out"; this.imageContainer.appendChild(this.image); this._baseElem.appendChild(this.imageContainer); } get baseElem() { return this._baseElem; } set imageSrc(value) { if (this._imageSrc == value) return; this._imageSrc = value; if (this.image) this.image.src = this._imageSrc; } get imageSrc() { return this._imageSrc; } set size(value) { if (this._size == value) return; this._size = value; if (this.imageContainer) { this.imageContainer.style.width = this._size + "px"; this.imageContainer.style.height = this._size + "px"; } } get size() { return this._size; } set visible(value) { if (this._visible == value) return; this._visible = value; if (this.imageContainer) this.imageContainer.style.display = this._visible == true ? "block" : "none"; if (this._visible == true) { this._intervalId = setInterval(() => { this.updateAnimationFrame(); }, this.delay); } else clearInterval(this._intervalId); } get visible() { return this._visible; } updateAnimationFrame() { if (this.isGrowing == true) { this.scale += this.scaleChange; this.rotation += this.rotadeDegrees; } else { this.scale -= this.scaleChange; this.rotation -= this.rotadeDegrees; } if (this.scale >= this.scaleChangeMax || this.scale <= this.scaleChangeMin) this.isGrowing = !this.isGrowing; this.image.style.transform = `scale(${this.scale}) rotate(${this.rotation}deg)`; } } window.LoadingImage = LoadingImage; class ProgressBar { constructor(baseElem) { this.progressBarContainer; this.progressBarChild; this.progressBarShrinker; this.progressBarText; this.text; this.showPercent = false; this._imageSrc; this._visible = false; 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%)"; this._backcolorHex = "#000000"; this._height = 60; this._fontSize = 15; this._cornerRadius = 0; this._baseElem; this.baseElem = baseElem; } set baseElem(value) { if (this._baseElem == value) return; this._baseElem = value; if (this.progressBarContainer) this.progressBarContainer.parentNode.removeChild(this.progressBarContainer); if (!document.getElementById("flaprogressstyle")) { const style = document.createElement("style"); style.id = "flaprogressstyle"; style.type = "text/css"; style.innerHTML = ` .fla-progressbar-container { width: 100%; position: relative; overflow: hidden; } .fla-progress { color: white; text-align: center; line-height: 60px; font-size: 35px; font-family: "Segoe UI"; width: 100%; height: 100%; position: absolute; background-size: cover; } .fla-shrinker { position: absolute; top: 0; right: 0; transition: width 0.5s ease; width: 100%; height: 100%; } .fla-progressbar-text { color: white; position: absolute; width: 100%; text-align: center; left: 50%; transform: translateX(-50%); text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; }`; document.head.appendChild(style); } this.progressBarContainer = document.createElement("div"); this.progressBarContainer.className = "fla-progressbar-container"; this.progressBarContainer.style.height = this.height + "px"; this.progressBarContainer.style.display = "none"; this.progressBarChild = document.createElement("div"); this.progressBarChild.className = "fla-progress"; this.progressBarChild.style.background = this.gradient; if (this.imageSrc) this.progressBarChild.style.backgroundImage = "url(" + this.imageSrc + ")"; this.progressBarShrinker = document.createElement("div"); this.progressBarShrinker.className = "fla-shrinker"; this.progressBarShrinker.style.backgroundColor = this.backcolorHex; this.progressBarText = document.createElement("span"); this.progressBarText.className = "fla-progressbar-text"; this.progressBarText.style.lineHeight = this.height + "px"; this.progressBarContainer.appendChild(this.progressBarChild); this.progressBarContainer.appendChild(this.progressBarShrinker); this.progressBarContainer.appendChild(this.progressBarText); this._baseElem.appendChild(this.progressBarContainer); } get baseElem() { return this._baseElem; } set cornerRadius(value) { if (this._cornerRadius == value) return; this._cornerRadius = value; if (this.progressBarContainer) this.progressBarContainer.style.borderRadius = this.cornerRadius + "px"; } get cornerRadius() { return this._cornerRadius; } set height(value) { if (this._height == value) return; this._height = value; if (this.progressBarContainer) this.progressBarContainer.style.height = this._height + "px"; if (this.progressBarText) this.progressBarText.style.lineHeight = this._height + "px"; } get height() { return this._height; } set fontSize(value) { if (this._fontSize == value) return; this._fontSize = value; if (this.progressBarText) { if (this._fontSize) this.progressBarText.style.fontSize = this._fontSize + "px"; else this.progressBarText.style.fontSize = ""; } } get fontSize() { return this._fontSize; } set gradient(value) { if (this._gradient == value) return; this._gradient = value; if (this.progressBarChild) this.progressBarChild.style.background = this._gradient; } get gradient() { return this._gradient; } set backcolorHex(value) { if (this._backcolorHex == value) return; this._backcolorHex = value; if (this.progressBarShrinker) this.progressBarShrinker.style.backgroundColor = this._backcolorHex; } get backcolorHex() { return this._backcolorHex; } set imageSrc(value) { if (this._imageSrc == value) return; this._imageSrc = value; if (this.progressBarChild) { if (this._imageSrc) this.progressBarChild.style.backgroundImage = "url(" + this._imageSrc + ")"; else this.progressBarChild.style.backgroundImage = ""; } } get imageSrc() { return this._imageSrc; } set visible(value) { if (this._visible == value) return; this._visible = value; if (this.progressBarContainer) this.progressBarContainer.style.display = this._visible == true ? "block" : "none"; } get visible() { return this._visible; } update(value) { value = +value; if (value > 100) value = 100; else if (value < 0) value = 0; this.progressBarShrinker.style.width = (100 - value) + '%'; this.progressBarText.textContent = (this.text ? this.text : "") + (this.showPercent == true ? value.toString() + "%" : ""); } } window.ProgressBar = ProgressBar; class LoadingBar { constructor(baseElem) { this.loadingBar; this._delay = 2000; this._text; this._height = 60; this._fontSize = 15; this._cornerRadius = 0; 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%)"; this._baseElem; this._visible = false; this.baseElem = baseElem; } set baseElem(value) { if (this._baseElem == value) return; this._baseElem = value; if (this.loadingBar) this.loadingBar.parentNode.removeChild(this.loadingBar); if (!document.getElementById("flaloadingbarstyle")) { const style = document.createElement("style"); style.id = "flaloadingbarstyle"; style.type = "text/css"; style.innerHTML = "@keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }"; document.head.appendChild(style); } this.loadingBar = document.createElement("div"); this.loadingBar.className = "fla-loadingbar"; this.loadingBar.textContent = this.text; this.loadingBar.style.width = "100%"; this.loadingBar.style.height = this.height + "px"; this.loadingBar.style.lineHeight = this.height + "px"; this.loadingBar.style.textShadow = "-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000"; this.loadingBar.style.background = this.gradient; this.loadingBar.style.backgroundSize = "200% auto"; this.loadingBar.style.backgroundPosition = "0 100%"; this.loadingBar.style.animation = `gradient ${(this.delay / 1000)}s infinite`; this.loadingBar.style.animationFillMode = "forwards"; this.loadingBar.style.animationTimingFunction = "linear"; this.loadingBar.style.display = "none"; this._baseElem.appendChild(this.loadingBar); } get baseElem() { return this._baseElem; } set delay(value) { if (this._delay == value) return; this._delay = value; if (this.loadingBar) this.loadingBar.style.animation = `gradient ${(this._delay / 1000)}s infinite`; } get delay() { return this._delay; } set text(value) { if (this._text == value) return; this._text = value; if (this.loadingBar) this.loadingBar.textContent = this._text; } get text() { return this._text; } set cornerRadius(value) { if (this._cornerRadius == value) return; this._cornerRadius = value; if (this.loadingBar) this.loadingBar.style.borderRadius = this.cornerRadius + "px"; } get cornerRadius() { return this._cornerRadius; } set height(value) { if (this._height == value) return; this._height = value; if (this.loadingBar) { this.loadingBar.style.height = this._height + "px"; this.loadingBar.style.lineHeight = this._height + "px"; } } get height() { return this._height; } set fontSize(value) { if (this._fontSize == value) return; this._fontSize = value; if (this.loadingBar) { if (this._fontSize) this.loadingBar.style.fontSize = this._fontSize + "px"; else this.loadingBar.style.fontSize = ""; } } get fontSize() { return this._fontSize; } set gradient(value) { if (this._gradient == value) return; this._gradient = value; if (this.loadingBar) this.loadingBar.style.background = this._gradient; } get gradient() { return this._gradient; } set visible(value) { if (this._visible == value) return; this._visible = value; if (this.loadingBar) this.loadingBar.style.display = this._visible == true ? "block" : "none"; } get visible() { return this._visible; } } window.LoadingBar = LoadingBar; })();