Skeleton loading - page transition

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

• The aim of the project was to create a skeleton loading animation which displays while the user is waiting for the actual data to be displayed. It features a couple of dummy empty div tags transitioning from darker grey to lighter grey infinitely until the page content is loaded. The dummy placeholders are then replaced by the actual data.

The challenge

Users will be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

• Solution URL: Excel Bill
• Live Site URL: express time tracker

My process

• First, I carefully thought out the building process after lookin at the design file.
• Next, I began by creating the html structure of the page.
• Then I moved forward to create reusable css classes and styles.
• Next, I proceeded to completing the UI with static html data.
• Finally, I added all the fucntionalities with JavaScript and pulled in the displayed data from an API source

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

• I learned how to work with JSON data and use API fetch methods.
• I also learnt how to create skeleton placeholder data and replace them with the required data after the page loads

Useful resources

Author

• Website - Excel
• Frontend Mentor - @kessyblaise1
• Twitter - @excel_bill