Furaffinity-Loading-Animations

Library for creating different loading animations on Furaffinity

От 21.01.2024. Виж последната версия.

Този скрипт не може да бъде инсталиран директно. Това е библиотека за други скриптове и може да бъде използвана с мета-директива // @require https://updategf.qytechs.cn/scripts/485153/1315111/Furaffinity-Loading-Animations.js

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

Автор
Midori Dragon
Версия
1.1.1
Създаден
18.01.2024
Обновен
21.01.2024
Размер
20 КБ
Лиценз
MIT

Furaffinity Loading Animations

Library for creating different loading animations on Furaffinity. Also see this Script on Github as Furaffinity-Loading-Animations

How to use

  • @require this script
  • Create a new Loading Animation:
  const baseElem = document.getElementById('spinner-container');
  const spinner = new LoadingSpinner(baseElem); //always give the baseElem as parameter
  spinner.visible = true;
  • Optional: Change Settings: spinner.forecolorHex = "#FF0000";

Documentation

LoadingSpinner

The LoadingSpinner class contains following Properties:

  • delay - The time in Milliseconds which each full rotation takes. default: 1000
  • size - The size of the Spinner. default: 60
  • spinnerThickness - The thickness of the Spinner. default: 4
  • spinnerLength - The length of the Spinner. default: 1 (Can only be set in quarters. 1 = 25%, 2 = 50% ...)
  • linearSpin - Whether the Spinner spins linearly. default: false
  • forecolorHex - The Forecolor of the Spinner in Hex. default: #8941de
  • backcolorHex - The Backcolor of the Spinner in Hex. default: #f3f3f3
  • visible - Whether the Spinner is visible. default: false
  • animationCurve - The Animation Curve of the Spinner. default: "cubic-bezier(.53,.24,.46,.83)" (For example: "ease-in-out")
  • spinner - The actual Spinner Element.
  • spinnerContainer - The Container of the Spinner.
  • baseElem - The Base Element in which the SpinnerContainer Element is located.

LoadingTextSpinner

The LoadingTextSpinner class contains following Properties:

  • delay - The time in Milliseconds which each full rotation takes. default: 600 (Changes only apply after visibility is reset)
  • characters - The characters that make up the Text rotation as an array. default: ["◜", "◠", "◝", "◞", "◡", "◟"]
  • visible - Whether the Spinner is visible. default: false
  • fontSize - The Font Size of the Spinner Text. default: 15
  • spinner - The actual Spinner Element.
  • baseElem - The Base Element in which the Spinner Element is located.

LoadingImage

The LoadingImage class contains following Properties:

  • delay - The delay in Milliseconds after each animation step. default: 100 (Changes only apply after visibility is reset)
  • size - The size of the Image. default: 60
  • doScaleImage - Whether the Image should be scaled up and down during the animation. default: true
  • scaleChange - The amount of Scale in percent the Image should be changed with each animation step. default: 0.05
  • scaleChangeMax - Maximum Scale of the Image in percent. default: 1.2
  • scaleChangeMin - Minimum Scale of the Image in percent. default: 0.8
  • doRotadeImage - Whether the Image should be rotated during the animation. default: true
  • rotateDegrees - The amount of Degrees the Image should be rotated with each animation step. default: 5
  • imageSrc - The Source Url of the Image. default: "https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png"
  • isGrowing - Whether the Image is currently growing or shrinking. Changes when animating. default: true
  • scale - The current Scale of the Image in percent. Changes when animating. default: 1
  • rotation - The current Rotation of the Image in Degrees. Changes when animating. default: 0
  • visible - Whether the Spinner is visible. default: false
  • image - The actual Image Element.
  • imageContainer - The Container of the Image.
  • baseElem - The Base Element in which the ImageContainer Element is located.

LoadingBar

The LoadingBar class contains following Properties:

  • delay - The time in Milliseconds which each full animation loop takes. default: 600
  • text - The Text that will be displayed on the Bar.
  • height - The Height of the LoadingBar. default: 60
  • visible - Whether the LoadingBar is visible. default: false
  • fontSize - The Font Size of the LoadingBar Text. default: 15
  • cornerRadius - The Corner Radius of the LoadingBar. default: 0
  • gradient - The Gradient of the LoadingBar. default: "repeating-linear-gradient(to right, ... 100%)"
  • loadingBar - The actual LoadingBar Element.
  • baseElem - The Base Element in which the LoadingBar Element is located.

ProgressBar

The ProgressBar class contains following Properties:

  • text - The Text that will be displayed on the Bar.
  • showPercent - Whether the Progress Percentage should be displayed on the Bar. default: false
  • imageSrc - The Source Url of the Image taken as Background. (No image if empty)
  • height - The Height of the ProgressBar. default: 60
  • visible - Whether the ProgressBar is visible. default: false
  • fontSize - The Font Size of the ProgressBar Text. default: 15
  • cornerRadius - The Corner Radius of the ProgressBar. default: 0
  • gradient - The Gradient of the ProgressBar. default: "linear-gradient(to right, ... 100%)"
  • backcolorHex - The Backcolor of the ProgressBar in Hex. default: #000000
  • progressBarContainer - The Container of the ProgressBar.
  • progressBarChild - The actual ProgressBar Element.
  • progressBarShrinker - The Shrinker of the ProgressBar that displays the Progress.
  • progressBarText - The Text Element of the ProgressBar.
  • baseElem - The Base Element in which the ProgressBarContainer Element is located.

Functions:

  • update(value) - Updates the ProgressBar with the given value in percent. (For example: update(50) will set the ProgressBar to 50%)
    • value - The new value in percent