Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rkstudio585/skeleton_templates

15+ Loading Skeleton Templates provides a collection of elegant and responsive loading placeholders inspired by popular web and mobile applications. Built with HTML and Tailwind CSS, these templates simulate various loading states to enhance user experience and maintain visual content is loading
https://github.com/rkstudio585/skeleton_templates

css html rk rk-studio skeleton skeleton-css skeleton-loading tawinecss

Last synced: 6 days ago
JSON representation

Host: GitHub
URL: https://github.com/rkstudio585/skeleton_templates
Owner: rkstudio585
License: mit
Created: 2024-08-31T15:00:33.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-11-03T17:29:23.000Z (2 months ago)
Last Synced: 2024-11-07T16:16:19.511Z (about 2 months ago)
Topics: css, html, rk, rk-studio, skeleton, skeleton-css, skeleton-loading, tawinecss
Language: HTML
Homepage: https://rkstudio.com
Size: 77.1 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Skeleton_Templates

![Project Logo](Logo.svg)

---
This repository contains a collection of loading skeleton templates designed to mimic the loading states of various popular web applications. These templates are built using HTML and Tailwind CSS to provide a visually appealing and responsive loading experience.

---
## **💪🏿 List & Skeleton Name:**

1. **Facebook Loading Skeleton**
- Inspired by Facebook's loading placeholders.

2. **GitHub Loading Skeleton**
- Inspired by GitHub's loading placeholders.

3. **Twitter (X) Loading Skeleton**
- Inspired by Twitter's loading placeholders.

4. **Instagram Loading Skeleton**
- Inspired by Instagram's loading placeholders.

5. **Threads Loading Skeleton**
- Inspired by Threads' loading placeholders.

6. **WhatsApp Loading Skeleton**
- Inspired by WhatsApp's loading placeholders.

7. **TikTok Loading Skeleton**
- Inspired by TikTok's loading placeholders.

8. **LinkedIn Loading Skeleton**
- Inspired by LinkedIn's loading placeholders.

9. **TikTok For You Page Loading Skeleton**
- Specifically for TikTok's For You Page.

10. **TikTok Profile Page Loading Skeleton**
- Specifically for TikTok's Profile Page.

11. **TikTok Chats Page Loading Skeleton**
- Specifically for TikTok's Chats Page.

12. **Messenger Chats List Home Page Loading Skeleton**
- Inspired by Facebook Messenger's Chats List.

13. **Facebook Profile Page Loading Skeleton**
- Inspired by Facebook's Profile Page.

14. **Facebook Settings Page Loading Skeleton**
- Inspired by Facebook's Settings Page.

15. **YouTube Home Page Loading Skeleton**
- Inspired by YouTube's Home Page.

16. **YouTube Reels Page Loading Skeleton**
- Inspired by YouTube's Reels Page.

17. **YouTube Subscription Page Loading Skeleton**
- Inspired by YouTube's Subscription Page.

18. **Telegram Loading Skeleton**
- Inspired by Telegram's loading placeholders.

19. **Telegram Profile Loading Skeleton**
- Inspired by Telegram's Profile Page.

20. **Meta Business Sites Loading Skeleton**
- Inspired by Meta Business sites' loading placeholders.

21. **YouTube Studio (YT Studio) Loading Skeleton**
- Inspired by YouTube Studio's loading placeholders.

22. **MyGP App Loading Skeleton**
- Inspired by the MyGP app's loading placeholders.

23. **Google Loading Skeleton**
- Inspired by Google's clean and minimalistic loading placeholders.

24. **Bonus Beautiful Loading Skeleton**
- A custom, visually appealing loading skeleton template.

# Live Demo link

- [Bonus.html](https://templates-gamma-two.vercel.app/Bonus.html)
- [Facebook.html](https://templates-gamma-two.vercel.app/Facebook.html)
- [Facebook_Settings_page.html](https://templates-gamma-two.vercel.app/Facebook_Settings_page.html)
- [Facebook_profile.html](https://templates-gamma-two.vercel.app/Facebook_profile.html)
- [GitHub.html](https://templates-gamma-two.vercel.app/GitHub.html)
- [Google.html](https://templates-gamma-two.vercel.app/Google.html)
- [Instagram.html](https://templates-gamma-two.vercel.app/Instagram.html)
- [LinkedIn.html](https://templates-gamma-two.vercel.app/LinkedIn.html)
- [Massagers.html](https://templates-gamma-two.vercel.app/Massagers.html)
- [Meta_Business.html](https://templates-gamma-two.vercel.app/Meta_Business.html)
- [MyGp.html](https://templates-gamma-two.vercel.app/MyGp.html)
- [Telegram.html](https://templates-gamma-two.vercel.app/Telegram.html)
- [Telegram_profile.html](https://templates-gamma-two.vercel.app/Telegram_profile.html)
- [Threads.html](https://templates-gamma-two.vercel.app/Threads.html)
- [TikTok.html](https://templates-gamma-two.vercel.app/TikTok.html)
- [TikTok_chats_page.html](https://templates-gamma-two.vercel.app/TikTok_chats_page.html)
- [TikTok_foryou_page.html](https://templates-gamma-two.vercel.app/TikTok_foryou_page.html)
- [TikTok_profile_page.html](https://templates-gamma-two.vercel.app/TikTok_profile_page.html)
- [Twitter_X.html](https://templates-gamma-two.vercel.app/Twitter_X.html)
- [WhatsApp.html](https://templates-gamma-two.vercel.app/WhatsApp.html)
- [YT_Studio.html](https://templates-gamma-two.vercel.app/YT_Studio.html)
- [YouTube.html](https://templates-gamma-two.vercel.app/YouTube.html)
- [YouTube_Subscription.html](https://templates-gamma-two.vercel.app/YouTube_Subscription.html)
- [YouTube_reel.html](https://templates-gamma-two.vercel.app/YouTube_reel.html)

## Overview
---
Loading skeletons are placeholders that simulate the content layout of a webpage while the actual content is loading. They improve the user experience by giving users a preview of the content structure and layout.

## Installation
---
To use these loading skeletons, you need to include Tailwind CSS in your project. You can either use the Tailwind CSS CDN or install it via npm.

### Using CDN
---
Simply include the following link in the `` of your HTML document:

```html

```

### Using npm
---
Install Tailwind CSS via npm:

```bash
npm install tailwindcss
```

Then, include it in your project according to the Tailwind CSS documentation.

## Usage
---
To use a loading template, copy the corresponding HTML code from the templates section into your HTML file. Ensure that you include the Tailwind CSS link or import in your project.

## Templates
---
### Facebook Profile Page

```html

Facebook Profile Page Loading Skeleton

```

### YouTube Home Page

```html

YouTube Home Page Loading Skeleton

```

### Google Style

```html

Google Style Loading Skeleton

```

### More Templates

Additional templates can be found in the repository. Feel free to explore and customize them according to your needs.

## Contributing

Contributions are welcome! If you have suggestions or improvements, please open an issue or submit a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/mdriyadkhan585/Skeleton_templates/blob/main/LICENSE) file for details.