In this project, you will learn how to create a flexible skeleton screen component using Vue.js. A skeleton screen is a UI pattern that displays a simplified version of the user interface before the actual content is loaded, providing a better user experience compared to traditional loading indicators.
👀 Preview
🎯 Tasks
In this project, you will learn:
How to use Vue.js to create a reusable skeleton screen component
How to implement the structure of the skeleton screen based on the provided data
How to apply flashing animation to the skeleton screen elements
🏆 Achievements
After completing this project, you will be able to:
Create a flexible skeleton screen component using Vue.js
Apply dynamic styles and classes to the skeleton screen elements
Implement a flashing animation effect for the skeleton screen
components/Skeleton is the skeleton screen component.
lib is the folder that stores the project dependencies.
css is the folder that stores the project styles.
Click on Go Live button in the bottom right corner of WebIDE, to run the project.
Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.
Create the Skeleton Screen Component
In this step, you will learn how to use the data paragraph passed from index.html and combine the knowledge of Vue recursive components to complete the writing of the skeleton screen component.
Open the components/Skeleton/item.js file.
In the ItemTemplate variable, add the following code:
let ItemTemplate = ``;
// TODO
ItemTemplate += `
<div :class="'ske-'+paragraph.type+'-container'">
<div v-for="item in arrIs(paragraph)" :class="classIs(item)" :style="styleIs(item)" >
<item :paragraph="item" :active="active"></item>
</div>
</div>
`;
This code will create the structure of the skeleton screen based on the paragraph data.
In the Vue.component("item", {...}) section, implement the following methods:
The arrIs method determines whether to use the rows or cols property of the paragraph object to render the nested components. The classIs method determines the CSS class to apply to the skeleton screen element based on the type property. The styleIs method determines the styles to apply to the skeleton screen element based on the style, rowStyle, and colStyle properties.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy