I am building a community like web app inspired by hashnode for sme in Nigeria, my tech stack includes, vuejs, laravel, pusher and redis. Please can any one tell me how to implement hashnode content display style where empty lines are shown while the client is fetching data?
Earlier I thought websites used to put a GIF in such loaders, but that is not a responsive solution. Digging into the page code, here is how it's done on Hashnode:
https://codepen.io/sidhantpanda/pen/VpXdKW
Hashnode surely inspires great design in all of us :)
I know this question has been answered . But I implemented it using background linear gradient change in animation. May be some can use it .
Sidhant Panda's answer is pretty spot on here, however, I would like to elaborate on the concept of how it works.
The loading cards are basically white cards, with a bunch of elements that have a gradient background. Now, the trick is to move the
background-positionon these elements to give it that nice and smooth loading effect.Here's some sample code to create something similar:
Markup
<div class="card"> <div class="loading"></div> <div class="loading"></div> </div>Card Styles
.card { background: #FFFFFF; padding: 16px; } .loading { padding: 8px; margin: 0 0 4px; background: linear-gradient(90deg, rgba(207, 216, 220, .15), rgba(207, 216, 220, .35), rgba(207, 216, 220, .15)); animation: loadanimation 1.4s ease infinite; }As you would've noticed, the loading rows have a gradient background. If we change this background position, it would appear as if something is moving. We just have to make sure that the timing is right and the movement doesn't feel jittery.
Here's the animation code to do that:
Animation
@keyframes loadanimation { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } }Hope it helps! 🙂
Extra: Here's a similar question that was asked a while ago, which actually inspired us to make these loading cards on hashnode.