How to add loading spinner to Codepen widget


#1

Hi guys, just a simple question. I see loading spinners everywhere, but I don’t always understand how they work when data is in a state of loading / finished loading…

I just have a simple web app that I’m building to use the YouTube API and I would love to implement a loading spinner because the videos are taking a little while to load. Perhaps there is a better way I should append my data in the first place? Anyway, A spinner would be cool but can someone please help me implement it?

Here is the Pen: https://codepen.io/JackEdwardLyons/pen/oeLbPy?editors=1010


#2

I’m not sure how the YouTube API works, but how I implement spinners generally is to create them in CSS, then hide or show them when an AJAX call is launched or finished. This is really, really easy to do with jQuery since it has global event handlers for its AJAX functions. When it comes to using Fetch, you could wrap your calls in a function and handle the spinner logic there, or create your own abstraction library that fires off events like jQuery.

My RxJS example project uses a spinner in this way:

Don’t worry about understanding this, just focus on lines 29 - 38. The loader is a div with a CSS animation (that I shamelessly stole from somewhere on the webs) When jQuery fires off the “ajaxSend” event, the loader is shown. When the “ajaxComplete” event fires, the loader is hidden.

Hope that helps.


#3

I helped Jack with this in our Front End chat room, but figured I’d document it here as well.

$.ajax does a great job of telling us when all data has been received, but if that data contains URLs to files, it won’t tell us when those files have finished downloading so we can display them in our HTML without watching them render.

One way to address this is to use the load event. Take any image or images from the API you have called and process them one at a time with this code:

var image = new Image();
image.addEventListener('load', function() {
  // the image has finished loading. Hide the spinner and show the image.
}
image.src = 'https://path/to/the/image.png'

Here’s a more complete example (jQuery): https://codepen.io/anon/pen/MvpbWM


#4

Thanks for all the help guys, I really appreciate it.


#5

I looked at the Codepen and had a question. If I did not care about the progress indicator, but wanted a spinner as a place holder for each image until each was fully loaded, how would that look?

For larger images, the spinner would stay longer than for smaller images.


#6

To use a spinner for each image, create placeholders with a unique ID to refer back to that ID and overwrite the spinner when the image finishes loading.

Here’s the same example as above with spinners for each image: https://codepen.io/anon/pen/gxmVrr


#7

I came across this code snippet that could help you – you can place it for every image/video


#8

Thats really cool, great work :slight_smile:


#9

Hey I also came across this epic solution to speed up iframe load times :slight_smile:
It uses the video thumbnail as a placeholder on init. Then when you click on the video, the iframe loads. It speeds up page load time CONSIDERABLY :slight_smile: