Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

via egghead.io

Overview

Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads.
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.
Follow the steps in this course and you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations, focusing on Web Accessibility and Web Semantic.

Syllabus

  • 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

Taught by

Will Mendes

Reviews

4.2 rating at egghead.io based on 14 ratings

Start your review of Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.