Angle Preloader

Documentation :

A preloader in HTML is a small animation or graphic displayed on a webpage while its content and resources are loading, preloaders are essential elements in web design to enhance user experience and ensure that a webpage loads smoothly and correctly. This preloader not only allows you to preload your entire web page but also individual elements within it.
before start using, add this script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/gh/shoaibn98/Angle_Preloader/Angle_Preloader.min.js" ></script>

Note:This is a Preloader. Link it before any JS file.

Then create div Elements id="Angle_Preloader" and define preloader inside a Script tag:

<div id="Angle_Preloader" >

   <script>

       var preloader = new Angle_Preloader(option);

   </script>

</div>

Option Object for customization:

<script>

    let option={
        type: "loading", // *Required* => To set type of Preloader 
        window: "element", // *Required If* => if preloader used as Element's Preloader 
        message: "loading", // *Optional* => To set Message to show 
        target: "elementID", // *Required If* => if preloader used as Element's Preloader 
        model: "circle_3", // *Required If* => Only used for some type of Preloaders like 'loading' 
        darkTheme: true, // *Optional* => To active dark Theme 
        color1: "red", // *Optional* => To set First animation's Color 
        color2: "green", // *Optional* => To set Second animation's Color 
        color3: "green", // *Optional* => To set 3th animation's Color
        messageColor: "green", // *Optional* => To set Color of Message text 
        diameter: 10, // *Optional* => To set Diameter only for some type like 'loading' and 'orbital' 
        spanCount: 10, // *Optional* => To set count of Spans only for some type like 'wave' and 'radio_wave' 
        rowCount: 10, // *Optional* => To set count of row  only for some type like 'flag' and 'diamond' 
        minHeight: 2, //  *Optional* => Only for type 'radio_wave' 
        maxHeight: 60, // *Optional* => Only for type 'radio_wave' 
        website: "website",  // *Optional* => Only for type 'anime_text'
        domain: "de", // *Optional* => Only for type 'anime_text' 
        websiteColor: "#fff", // *Optional* => Only for type 'anime_text' 
        domainColor: "#000", // *Optional* => Only for type 'anime_text' 
        dotColor: "#000", // *Optional* => Only for type 'anime_text' 
        }

   var preloader = new Angle_Preloader(option);

</script>

It's almost finished. For last step you need to add hide() function of this package to stop preloader, when your website loaded:

var preloader = new Angle_Preloader(option);

function onload() {

    preloader.hide();

Note: don't forget to add this line in to onload() event.

Personalization :

preloader.setText("Please Wait..."); //set Message Text

preloader.setTextColor("#000"); //set Message text Color HEX Format

preloader.setTextColor("rgba(33,158,188,0.7)"); //set Message text Color RGB or RGBA

preloader.setTextFontFamily("Font Family");//Set Message Text Font Family

preloader.setTextFontSize(20);//Set Message Text Font Size

//set color to the preloader's elements

preloader.setBlockColor("blue");

preloader.setBlockStartColor("#7c2169")

preloader.setBlockEndColor("#b81140")

//Dark Theme

preloader.darkTheme(true);

//Setting Only for Anime_Text Preloader

preLoader.siteColor("#7c2169") //To Set color of first part of text or Website name

preLoader.domainColor("#7c2169") // To set color of second part of Text or Domain

preLoader.dotColor("#7c2169") // To set color of dot in middle of both text

Documentation :

Personalization :

Made with ❤ by Shoaib Norouzi