Tips for adjusting the size of the page loader to fit the browser window while maintaining the aspect ratio

Looking for assistance in making the page loader responsive. I want the loader to adjust its size based on the window browser loading and resizing. The width, height, fontSize, and diameter should be converted to percentages instead of Pixels. It is essential that the loader scales properly across all device types. Your help in resolving this would be greatly appreciated!

Thank you for your support!

Sample link:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Loader Examplee</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script>

(function(d) {
    d.fn.ClassyLoader = function(a) {
        a = d.extend({}, {
            animate: !0,
            displayOnLoad: !0,
            percentage: 100,
            speed: 1,
            roundedLine: !1,
            showRemaining: !0,
            fontFamily: "Helvetica",
            fontSize: "50px",
            showText: !0,
            diameter: 80,
            fontColor: "rgba(25, 25, 25, 0.6)",
            lineColor: "rgba(55, 55, 55, 1)",
            remainingLineColor: "rgba(55, 55, 55, 0.4)",
            lineWidth: 5
        }, a);
        var e = d(this);
        this.draw = function(b) {
            "undefined" !== typeof b && (a.percentage = b);
            var c = e[0].getContext("2d"),
                g = e.width() / 2,
                d = e.height() / 2,
                f = 0;
            c.scale(1, 1);
            c.lineWidth = a.lineWidth;
            c.strokeStyle = a.lineColour;
            setTimeout(function h() {
                var b = Math.PI / 180 * 360 / 100 * (f + 1),
                    b = b || Math.PI / 180 * 360 / 100 * (f +
                        1);
                c.clearRect(0, 0, e.width(), e.height());
                !0 === a.showRemaining && (c.beginPath(), c
                    .strokeStyle = a.remainingLineColor,
                    c.arc(g, d, a.diameter, 0, 360), c.stroke(),
                    c.closePath());
                c.strokeStyle = a.lineColor;
                c.beginPath();
                c.lineCap = !0 === a.roundedLine ? "round" :
                    "butt";
                c.arc(g, d, a.diameter, 0, b);
                c.stroke();
                c.closePath();
                !0 === a.showText && (c.fillStyle = a.fontColor,
                    c.font = a.fontSize + " " + a.fontFamily,
                    c.textAlign = "center", c.textBaseline =
                    "middle", c.fillText(f + 1 + "%", g,
                        d));
                f += 1;
                f < a.percentage && setTimeout(h, a.speed)
            }, a.speed)
        };
        this.setPercent = function(b) {
            a.percentage = b;
            return this
        };
        this.getPercent = function() {
            return a.percentage
        };
        this.show = function() {
            var b = e[0].getContext("2d"),
                c = e.width() / 2,
                d = e.height() / 2;
            b.scale(1, 1);
            b.lineWidth = a.lineWidth;
            b.strokeStyle = a.lineColour;
            b.clearRect(0, 0, e.width(), e.height());
            b.strokeStyle = a.lineColor;
            b.beginPath();
            b.arc(c, d, a.diameter, 0, Math.PI / 180 * (a.percentage /
                100) * 360);
            b.stroke();
            b.closePath();
            !0 === a.showText && (b.fillStyle = a.fontColor, b.font =
                a.fontSize + " " + a.font, b.textAlign =
                "center", b.textBaseline = "middle", b.fillText(
                    a.percentage + "%", c, d));
            !0 === a.showRemaining && (b.beginPath(), b.strokeStyle =
                a.remainingLineColor, b.arc(c, d, a.diameter, 0,
                    360), b.stroke(), b.closePath())
        };
        this.__constructor = function() {
            d(this).attr("width", a.width);
            d(this).attr("height", a.height);
            !0 === a.displayOnLoad && (!0 === a.animate ? this.draw() :
                this.show());
            return this
        };
        return this.__constructor()
    }
})(jQuery);
</script>


<script>


$(document).ready(function() {
$('.loader').ClassyLoader({

width:900,
height:900,
animate: true, // whether to animate the loader or not
displayOnLoad: true,
percentage: 100, // percent of the value, between 0 and 100
speed: 1, // miliseconds between animation cycles, lower value is faster
roundedLine: false, // whether the line is rounded, in pixels
showRemaining: true, // how the remaining percentage (100% - percentage)
fontFamily: 'Helvetica', // name of the font for the percentage
fontSize: '100px', // size of the percentage font, in pixels
showText: true, // whether to display the percentage text
diameter:200, // diameter of the circle, in pixels
fontColor: '#53E40D', // color of the font in the center of the loader, any CSS color would work, hex, rgb, rgba, hsl, hsla
lineColor: '#53E40D', // line color of the main circle
remainingLineColor: 'lightgray', // line color of the remaining percentage (if showRemaining is true)
lineWidth: 10 // the width of the circle line in pixels


});
});
</script>


<style type="text/css">

body {
    background-color:black;
}

div#loaderWrapper {
    text-align:center;
        margin:auto;
width:100%;
    height:100%;

}
.loader {
    background-color:red !important;
    text-align:center !important;

}

</style>

</head>

<body>
<div id="loaderWrapper" ><canvas class="loader"></canvas></div>
</body>
</body>
</html>

Answer №1

Experiment with resizing function incorporate all the code within

$(window).resize(function(){

}) it is triggered by

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop users from double clicking on HTML elements

How can I avoid users double clicking the submit button in HTML? Any suggestions? ...

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me. My setup includes: { "typescript": "2.3.2", ...

Exploring the utilization of functions beyond module exports

Striving to clearly communicate my intentions, please feel free to ask if anything is unclear. Within a file named www, I am configuring my socket as follows: var server = http.createServer(app); var io = require('socket.io')(server); require(& ...

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

Having difficulties initiating the JS server due to insufficient information

After creating a fresh react-native project, I encountered a problem when running the command react-native run-android. The project consistently gets stuck at the message info Starting JS server.... Below is the output of the command: $ react-native run- ...

I'm looking for a way to incorporate JavaScript code within an iframe tag. Specifically, I'm attempting to embed code into a Wix website using the "Embed HTML

Trying to execute the code below on a Wix website using "Embed HTML", but IFRAME is blocking scripts. Seeking help to embed custom HTML with JavaScript on platforms like Wix.com or Wordpress.com, as the embedded code is not functioning due to IFRAME restri ...

Is there a way to replicate this modal effect on a WordPress website?

I am looking to replicate the functionality I have seen on . When clicking on the mail icon in their navigation bar, it opens a modal form displaying an existing section from the homepage. Is there a way to achieve this without using plugins? However, sug ...

The image fails to load after I moved the routers from the server file (entry point file) to the controller file

I recently made the decision to transition two routers from my server file to my controller file in order to adhere to the MVC format. However, after making this change, I realized that the logo image is no longer visible on those routers. It seems like al ...

Seeking particular section of online content in an asynchronous manner

Is there a method for asynchronously requesting a specific portion of a web resource (like the initial 100 bytes) using JavaScript? I believed this could be accomplished through XmlHttpRequest by adjusting its Range header. However, if the server utilizes ...

Loading and linking JavaScript and JSX files

Working with ReactJS has been smooth sailing when it's all contained in one file. I've been loading it using the code <script type="text/babel" src="js/test.js"></script>. For some reason, using "text/javascript" causes issues with r ...

What could be the reason for npm start failing to work following npm init?

Starting a new project using NPM : npm init Installed the socket.io-client package. package.json: { "name": "client", "version": "1.0.0", "description": "", "main": "script.js&qu ...

Unleashing the power of real-time communication with XMPP using AngularJS

I am currently working on transitioning the basic XMPP setup using Strophe and JavaScript to AngularJS. .controller('loginCtrl', function(xmppAuth) { xmppAuth.auth(login, password); }) and in service: .service('xmppAuth', f ...

Issue with TypeScript in Vue3: Unable to access computed property from another computed property

In my Vue3 project with TypeScript, I am encountering an issue where I am unable to access the properties of the returned JavaScript object from one computed property in another computed property using dot notation or named indexing. For instance, when tr ...

The CSS gradient is not displaying properly, and the footer is not staying at the bottom of the page and is not resizing correctly on mobile devices

Does anyone know how to make this code responsive for mobile and other devices? Visit: Issues: The gradient text doesn't load correctly when resizing the website. The footer doesn't stick to the bottom and has display errors on mobile. The H ...

Getting data before the Router is loaded following authentication with Angular 2+ - A comprehensive guide

I'm hoping this isn't a repeat. Within my login component, I have a feature that allows users to log in, which calls a service and retrieves a Token. Upon successful login, the token is saved to localStorage. Subsequently, I use the getUserData ...

Obtain the information from a JSONP-formatted dataset

Just when I think I have mastered identifying an element in an object, I come across a situation where I am unable to obtain the desired value. This part is successful and the data returned is accurate: A map click triggers the function MapClick(queryResu ...

Utilizing Jquery for transmitting and receiving data

As a newcomer to application development, I have been struggling with figuring out how to send and retrieve data using the latest version of JQuery. My main concern is ensuring that the functionality I implement is compatible with all browsers. While I ha ...

The pagination feature in Algolia instantsearch fails to display the results from the second page

While working with Laravel Vue and Algolia, I encountered an issue with pagination. The pagination seems to be functioning, but only the first page result is displayed. Clicking on pages 2, 3, etc. does not fetch the next page's results. Below are the ...

Adjust font style within an HTML/CSS document

I recently obtained the source code for an online portfolio project, but I'm struggling to figure out how to modify the font style. Can anyone provide guidance on this issue? https://github.com/akashyap2013/PortFolio_Website ...

Navigating with tabs leads me to the top of the page

I am having an issue with my tabbing setup. When I click on a tab, it displays the content as expected, but also scrolls me to the top of the page, which is not desired. Below is the code snippet in question: $('.team-tab1').click(function() { ...