Let's say we've a page with fixed width and height we can use the following css to create a loading skeleton to show on the website:
.skeleton {
animation: skeleton-loading 1s linear infinite alternate;
}
@keyframes skeleton-loading {
0% {
background-color: hsl(200,20%,70%);
}
100% {
background-color: hsl(200,20%,95%);
}
}
This creates a loading animation which runs behind the actual image or title or anywhere you want. For example something like this:
Similarly you can create a loading animation for your title or paragraph for your website using the same concept. Such as
No comments:
Post a Comment