The goal of this project was to create a user profile skeleton screen that displays a loading state before showing the actual user profile information. This approach enhances the user experience by indicating that data is being loaded.
| Device | State | Screenshot |
|---|---|---|
| Mobile | Loading |  |
| Final |  |
|
| Desktop | Loading |  |
| Final |  |
- HTML5
- CSS3
- JavaScript
- Implementing skeleton screens to enhance the user experience during data loading.
- Using CSS animations for a smooth loading effect.
- Handling dynamic content updates with JavaScript.
Future improvements may include:
- Integrating real API calls to fetch user data.
- Enhancing the design with additional animations and transitions.
- Adding more responsive design features for various screen sizes.
-
Clone the repository:
git clone https://github.com/yourusername/user-profile-skeleton.git
-
Navigate to the project directory:
cd user-profile-skeleton -
Open
index.htmlin your preferred web browser to view the project.
No external dependencies are required for this project. All styles and functionality are handled through native HTML, CSS, and JavaScript.
- The initial skeleton screen will be displayed.
- After 5 seconds, the profile content will appear with user details.
- Customize the
script.jsfile to change the simulated user data.
index.htmlstyle.cssscript.jsimages/README.md
index.html: The main HTML file containing the structure of the profile and skeleton screen.styles.css: The stylesheet defining the styles for the skeleton screen and profile content.script.js: The JavaScript file simulating data fetch and updating the DOM.images/: Folder containing screenshots of the project in both mobile and desktop views (loading and final states).