Library for creating different loading animations on Furaffinity
Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta
// @require https://update.greatest.deepsurf.us/scripts/485153/1549461/Furaffinity-Loading-Animations.js
Library for creating different loading animations on Furaffinity. Also see docs on Furaffinity-Loading-Animations
@require this script
Create a new Loading Animation:
const baseElem = document.getElementById('spinner-container');
const spinner = new FALoadingSpinner(baseElem); //always give the baseElem as parameter
spinner.visible = true;
⠀⠀⠀⠀
const textSpinner = new FALoadingTextSpinner(baseElem);
const imageSpinner = new FALoadingImage(baseElem);
const barSpinner = new FALoadingBar(baseElem);
See FALoadingSpinner for more info
Optional: Change Settings:
spinner.forecolorHex = "#FF0000";
spinner.spinnerThickness = 6;
| Feature | Status |
|---|---|
| Have basic Options for all Loading Animations ⠀⠀⠀⠀ | ✅ Completed |
| ⠀⠀⠀⠀Change Speed | ✅ Completed |
| ⠀⠀⠀⠀Change Visibility | ✅ Completed |
| ⠀⠀⠀⠀Change Size | ✅ Completed |
| Have different Types of Animations | ✅ Completed |
| ⠀⠀⠀⠀Text Spinner | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Text | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Font Size | ✅ Completed |
| ⠀⠀⠀⠀Loading Spinner | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Color | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Thickness | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Animation | ✅ Completed |
| ⠀⠀⠀⠀Image Animation | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Image | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Animation | ✅ Completed |
| ⠀⠀⠀⠀Loading Bar | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Color | ✅ Completed |
| ⠀⠀⠀⠀⠀⠀⠀⠀Change Text | ✅ Completed |
| Progress Bar | ⬜ Planned |
The FALoadingSpinner class contains following Properties:
delay - The time in Milliseconds which each full rotation takes. default: 1000size - The size of the Spinner. default: 60spinnerThickness - The thickness of the Spinner. default: 4spinnerLength - The length of the Spinner. default: 1 (Can only be set in quarters. 1 = 25%, 2 = 50% ...)linearSpin - Whether the Spinner spins linearly. default: falseforecolorHex - The Forecolor of the Spinner in Hex. default: #8941debackcolorHex - The Backcolor of the Spinner in Hex. default: #f3f3f3visible - Whether the Spinner is visible. default: falseanimationCurve - The Animation Curve of the Spinner. default: "cubic-bezier(.53,.24,.46,.83)" (For example: "ease-in-out")baseElem - The Base Element in which the SpinnerContainer Element is located.It has following functions:
dispose() - Disposes the FALoadingSpinner by removing it from the baseElem.The FALoadingTextSpinner class contains following Properties:
delay - The time in Milliseconds which each full rotation takes. default: 600characters - The characters that make up the Text rotation as an array. default: ['◜', '◠', '◝', '◞', '◡', '◟']visible - Whether the Spinner is visible. default: falsefontSize - The Font Size of the Spinner Text. default: 15baseElem - The Base Element in which the Spinner Element is located.It has following functions:
dispose() - Disposes the FALoadingSpinner by removing it from the baseElem.The FALoadingImage class contains following Properties:
delay - The delay in Milliseconds after each animation step. default: 100size - The size of the Image. default: 60doScaleImage - Whether the Image should be scaled up and down during the animation. default: truescaleChange - The amount of Scale in percent the Image should be changed with each animation step. default: 0.05scaleChangeMax - Maximum Scale of the Image in percent. default: 1.2scaleChangeMin - Minimum Scale of the Image in percent. default: 0.8doRotateImage - Whether the Image should be rotated during the animation. default: truerotateDegrees - The amount of Degrees the Image should be rotated with each animation step. default: 5imageSrc - 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 (only get)scale - The current Scale of the Image in percent. Changes when animating. default: 1rotation - The current Rotation of the Image in Degrees. Changes when animating. default: 0visible - Whether the Spinner is visible. default: falsebaseElem - The Base Element in which the ImageContainer Element is located.It has following functions:
dispose() - Disposes the FALoadingSpinner by removing it from the baseElem.The FALoadingBar class contains following Properties:
delay - The time in Milliseconds which each full animation loop takes. default: 600text - The Text that will be displayed on the Bar.height - The Height of the LoadingBar. default: 60visible - Whether the LoadingBar is visible. default: falsefontSize - The Font Size of the LoadingBar Text. default: 15cornerRadius - The Corner Radius of the LoadingBar. default: 0gradient - The Gradient of the LoadingBar. default: 'repeating-linear-gradient(to right, ... 100%)'baseElem - The Base Element in which the LoadingBar Element is located.It has following functions:
dispose() - Disposes the FALoadingSpinner by removing it from the baseElem.