Download Progress Monitoring with SVG Animation

Рет қаралды 1,511

Күн бұрын

This tutorial has two topics - first is how to make an animated circular progress meter using SVG, CSS, and JS. The second part examines how to monitor progress of a file download using the JavaScript fetch method.
Code from video: gist.github.co...

Пікірлер: 28

@shahinza 5 ай бұрын

Welcome back professor 😊

@fakedevdutt 4 ай бұрын

In past three days I saw nearly 30 videos of yours which are related to service workes, files, cache, indexedDB, PWAs and they were incredeble i learned soo much!! This videos are best in class you go throught each line reason why how it works beautiful! I feel like I learned soo much in this three days!

@rmnkot 5 ай бұрын

Great lesson! One thing to improve is to make DOM selections outside of the recursion and reference inside. 🙂

@ravenkavoori 5 ай бұрын

Welcome back professor, It's nice to see you again.

@blokche_dev 5 ай бұрын

It's been a while! Glad to see you back. Thanks for sharing.

@brucewayne252 5 ай бұрын

Missed you Professor! Learning new things again with you :)

@florentd.5817 2 ай бұрын

Hi, thanks a lot for your sharing tutos. Just a notice, you should start 'sometime' by a preview of the result. It's help and motivate to follow the full tutorial.

@ygvanz 5 ай бұрын

Glad to see you back, professor.

@YassinAlHassany 5 ай бұрын

Welcome back. Your channel is so professional.

@Raj9x7 4 ай бұрын

I'm so happy to see you back. I missed your videos a lot. ❤

@ΕγωΕγω-ρ6ω 5 ай бұрын

Thank you for sharing this amazing video and welcome back 💓🙏

@mtcindianutube 5 ай бұрын

This awesome tutorial @Steve

@doriomer 3 ай бұрын

Thank you, clear explanation as always...

@kingwoodbudo 5 ай бұрын

Missed seeing your tutorials, glad you're back!

@svilenivanov3621 5 ай бұрын

Awaysome tutorial, thanks!

@NedumEze 5 ай бұрын

Wow! A semester's course work, huh? Thank you sir.

@fedordostoevskiy4209 5 ай бұрын

Super processor. 👍

@shahinza 5 ай бұрын

Professor, thank you so much for this fantastic video! I have a question: Once we enter the 'if(done)' condition, can we just return the response and add a new '.then', inside that use 'response.blob()' and then set the image source? If we do this, I believe we don't need an array to gather chunks anymore right?

@SteveGriffith-Prof3ssorSt3v3 5 ай бұрын

You could just work with the response object but when done == true it means you have the whole thing. There are no more chunks at that point.

@yashpandey9550 5 ай бұрын

Hey there, amazing video for teaching important first principles of the Web. I just have one small question. After we have downloaded the resource image using fetch then it should have been cached by the browser. So after we are done reading all the image data from the stream, simply setting the href of the image tag to the actual url shouldn't cause another download and should instantly render the image. I guess we are only doing the blob thing here to understand how to handle and process our data after the stream is fully consumed and closed. Is there any other benefit of this blob approach? Let me know if I misjudged something.

@SteveGriffith-Prof3ssorSt3v3 5 ай бұрын

The fetched blob will not be cached and used by setting the image element src to the fetched url. They are two different initiators for the request and use different security context. An image element does not need to follow the same CORS rules as a fetch call. The image element src is initiated by the browser and the fetch is initiated by script. So, setting img.src after the blob is downloaded means starting a whole new download. The caching is also controlled by possible cache-control headers. If you want to track the download progress then you would use the fetch plus the reader. Once you have all the chunks you can reassemble the file from the body and call json( ), text( ), or blob( ) to extract the contents from the file. Then do what you like with the contents.