Dynamic HTML Loading with Skeleton Loader - jQuery Godfather.js

Godfather.js is a lightweight jQuery plugin that combines dynamic HTML loading with skeleton screens to create smooth loading states in web applications.

It loads HTML components into specified containers while displaying animated skeleton screens during the fetch process.

How it works:

This plugin handles HTML component loading through a straightforward API. It fetches components from the server and injects them into target containers. During the loading process, it displays skeleton screens that match the component's final layout.

The plugin supports dynamic data injection through template variables. You can pass data objects to populate content within your loaded components. This works well for user-specific content, dynamic text, or any variable data that needs insertion into your HTML templates.

The skeleton loader runs only during the actual component fetch time. This creates a natural loading experience that reflects true loading states rather than artificial delays.

How to use it:

1. Download and load the necessary godfather.js files after you've loaded the latest jQuery library.

<!-- jQuery library -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Godfather CSS -->
<link rel="stylesheet" href="/godfather-js/godfather.css" />

<!-- Godfather JS -->
<script src="/godfather-js/godfather.js"></script>

2. Create a div element where the HTML component will be injected.

<div
  id="myComponent"
  style="height: 100%; width: 100px;"
></div>

3. Prepare your HTML component with template variables that godfather.js will load dynamically.

<!-- article.html -->
<article>
  <p>Welcome, {{username}}!</p>
  <p>Your Article Here
  <p><a href="#">Contact us</a></p>
</nav>

<script>
  // Example script to change the "Contact" link text after load
  const contactLink = document.querySelector("article p:last-child a");
  if (contactLink) {
    contactLink.textContent = "Get in Touch!";
    contactLink.style.color = "red"; // Change text color to red as a visual cue
  }
</script>

4.Initialize the plugin and load your HTML component with dynamic data:

$(document).ready(function () {
  $("#myComponent").godfather({
    componentURL: "/path/to/article.html",
    data: {
      username: "jQueryScript",
    },
  });
});

5. Override the default styles and animations of the skeleton loader:

/* Basic style for the skeleton loader */
.skeleton {
  background: #e0e0e0; /* Light gray background for loading state */
  height: 100%; /* Adjustable height based on expected content */
  width: 100%; /* Takes full width of the container */
  animation: skeleton-animation 1.5s infinite ease-in-out;
}

/* Animation for the skeleton loader */
@keyframes skeleton-animation {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #c0c0c0; /* Darker gray for animation effect */
  }
  100% {
    background-color: #e0e0e0;
  }
}

/* Optional: Add a loading animation class for further customization */
.loading-animation {
  border-radius: inherit;
  margin: 0 auto; /* Center the loader horizontally if needed */
}

---

This awesome jQuery plugin is developed by santiagovalls. For more Advanced Usages, please check the demo page or visit the official website.