YouTube is a “single page application”, when you open it the video data is not fetched yet with the page. that when you see the gray parts and you can style them like here.
After fetching the data of the videos they hide the loading part then showing the real video elements.
For example:
<div class="loading">
<!-- Loading elements -->
</div>
<div class="videos" style="display: none">
<!-- The display will change the the is fetched from the server -->
</div>
When I open some web-pages such as Youtube, I see the gray parts which would mean that it is loading data.
How can I make this kind of effect when building a web-page?
Just answering in general is enough! Thank you.
you can use the Placeholder from Semantic UI
@JulianSoro Thank you for your comment! now i understand it better.
Thank you so much for your answer! It is so easy to understand. By the way, how can I differentiate if the the data has been fetched or not? Is it something feasible with Javascript?
As an end use you need to do some hard debugging and tracing for the code, but the simplest way is opening the console in the network tab to see all requests. as a developer if you know how to fetch data from the server using Javascript, you should know how to know if the data is fetched or not.
ah, yea that should be true. I realized that my question was silly lol. Thank you a lot!