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>