Come on:
Bug #1: Calling the script
the javascript code that creates the spinner does not exist on the page. it is necessary to reference it in HTML, but the functions showLoading and removeLoading will not exist.
for this it is necessary to call your script (I assume that you are saved in the same directory of the index.html, with a name like "meuSpin.js"):
<script src="meuSpin.js"></script>
In the case of JSFIDDLE, javascript is automatically inserted into the result.
But, in this case, your script serves to show a loading AS LONG AS the page is loading, so the first thing that should appear on the page is your loading script. Calling a reference to an external script implies an extra request, and some browsers may decide to call it after the content is displayed, so your script might not serve at all.
In this case, the wisest would be to leave the code along with the call of showLoading.
Bug #2: Scripts that manipulate the DOM outside of HTML
In your script, in the function setupLoading (which, see bug #3, is not called), you manipulate the DOM, creating an element to contain the spinner:
$('<div id="divSpin" />').appendTo(document.body);
Document.body doesn’t even exist yet.
the solution in this case is to leave the script right after opening the tag :
<body>
<script>
$(document).on(showLoading);
</script>
...
...
</script>
// esconde o loading
</script>
</body>
Jsfiddle automatically inserts the contents of the HTML tab into the body of the result, therefore the tag <head> is ignored.
As a counterpart, they provide options within the Javascript area on how your code will be inserted.
Click on "Javascript ", and on LOAD TYPE, select No Wrap - Bottom of HEAD
This means they will put their script at the end of <head>. So we’ll still need jQuery on("ready"
Bug 3: Use of Spin.js library
The function showLoading calls the mySpinner spin. So she hopes that mySpinner be an instance of new Spinner(opts).
For this we need to call the code portion mySpinner = new Spinner(opts) before calling mySpinner.spin(target).
It all just happens inside setupLoading().
Bug #4: Dependencies
Spin.js has no dependency, so it should work naturally. Your code on the other hand depends on jQuery.
For this you need to enter the jQuery before calling $()
I deduce that in your code there is already a tag calling Spin.js:
<head>
<script src="jquery.min.js"></script>
<script src="spin.min.js"></script>
</head>
In the case of JSFIDDLE, you need to configure your fiddle with dependencies:
Click on "Javascript ", under Frameworks and Extensions, open the dropdown and select jQuery (edge)
To add Spin.js, click on Resources just below the Jsfiddle blue logo, type "spin.js" in the text box, and select spin js. from the autocomplete list. Then click the + in the circle to add it to your fiddle.
Bug #5: Use of jQuery
If the loading is meant to show while the content does not load, know that it will not appear until at least Spin.js and jQuery.js have been loaded.
If you still want to use jQuery, you just need to adjust the way you call the functions.
$(document).ready(function () {
...
})
- $() calls the jQuery selector, wrapping the element as a jquery object.
- Document is a global js variable, represents the page document.
- .ready(fn) is a jquery method that calls a function fn when the jquery object from which it was called (in the case $(Document)) is ready, loaded.
So it will only be called when the whole document, the tag <html>, is fully charged and ready for handling.
Because of this, you need to insert a tag within the Jsfiddle HTML area to be able to call the functions.
Elsewhere, there is the call $(document).on(removeLoading).
jQuery().on(event, callback) calls the callback when Event happen. (ie, jQuery.ready(fn) is a shortcut to jQuery.on("ready",fn))
If you wanted to call the function showLoading or hideLoading when the page is ready, the code should be:
$(document).ready(function() {
showLoading()
})
Ending:
Considering all the cool ones, your final code should look like this:
<html>
<head>
<title>Minha Pagina com Spinner</title>
<script src="jquery.min.js"></script>
<script src="spin.min.js"></script>
<link rel="stylesheet" href="spin.min.css" />
</head>
<body>
<div id="divSpin"></div>
<script>
var target = document.getElementById("divSpin");
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 8, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'mySpin', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var mySpinner = new Spinner(opts).spin(target);
</script>
...
<script>
mySpinner.stop()
</script>
</body>
</html>
Note that in this code I do not use jQuery.ready()
Good,
Looks beautiful
But it won’t work.
Even if you insert thousands of data between the two scripts, and make a site with so much stuff that it takes to load enough to be able to see the loading, it will still be frustrated, because the loading will not appear.
The browser needs the beginning and of end html to be able to display it. That is, something will only appear on your screen after the last one is sent. Scripts will also only be executed after this.
If you need to show a loading while the content is loaded, you need to get this content by an Ajax request.
This implies having at least one local HTTP server running, to be able to request on your own machine.
My suggestion is to look for how to do this with React or another tool, which creates a local server, facilitates the creation of templates and code calls, and does not need jQuery anymore.
But if it’s not urgent, it’s best to try to understand the flow of DOM, how and when functions are called, how HTML is rendered, find out how servers work and go through the learning of installing an Nginx or Apache on your machine, understand AJAX calls, the Fetch API, and see how it is possible to insert HTML asynchronously on your page, so that you can see the loading.
Missing vc load libraries . js and . css.
– Sam