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.

4

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

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:

1 Like
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:

1 Like