Create Skeleton Loader using CSS Animations

Use prefers-reduced-motion CSS Media Query to Improve Web Accessibility in your App

Use WAI-ARIA Attributes to improve Web Accessibility of your Skeleton Loader

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads. Also, CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page. In the end, you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations.


https://app.egghead.io/api/v1/lessons/css-create-skeleton-loader-using-css-animations/subtitles

Instructor: [0:01] Let's create a new file called index.html. In this file we create a div and add a class called skeleton-loader. Also, we'll add a link for stylesheet file. Now, let's create a new file called style.css, and add the styles for our skeleton-loader.

[0:28] Let's create a class called skeleton-loader. Inside this style add a box-sizing. That will be border-box, a position that will be relative, a background that in this case will be a color. In that case, let's use a gray color. Also, add a no-repeat, so that color won't be repeated if the background is too big.

[0:58] In addition that, let's add our width and height. Both will be 200 pixels. Now, add a small change from the skeleton loader. This will be a circle, add a border radius as 50 percent.

[1:17] We can add animation for our skeleton. For this, we'll be using @keyframes. The name of the animation will be pulse. We add in zero percent, we have opacity as 1. 50 percent, we have opacity as 04, and 100 percent, we have opacity as 1.

[1:38] Also, we add animation in our skeleton load element, so we can use this animation. We'll be at animation field, and we'll be calling pulse. That's in two seconds, and say that we'll be running infinity. Also, we add animation delay of .5 seconds. When we refresh the page, we can see the animation.

Create Skeleton Loader using CSS Animations

Share this video with your friends

Course

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS