{"library":"skeleton-loader-vue","title":"Vue Skeleton Loader","description":"skeleton-loader-vue is a simple, customizable skeleton loader component designed for Vue.js applications to enhance user experience by displaying placeholder content while data is being fetched. Currently at version 1.0.10, this library is specifically built for Vue 2.x environments (peer dependency `vue: ^2.6.11`). It provides configurable shapes (rectangle, circle), dimensions, animations (wave, fade, pulse), and colors. Its release cadence is no longer active, as it has not seen updates in several years. Key differentiators include its ease of use and direct integration into Vue 2 component structures for displaying progressive loading states.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install skeleton-loader-vue"],"cli":null},"imports":["import VueSkeletonLoader from 'skeleton-loader-vue';","import VueSkeletonLoader from 'skeleton-loader-vue';\nVue.component('vue-skeleton-loader', VueSkeletonLoader);","import VueSkeletonLoader from 'skeleton-loader-vue';\nexport default {\n  components: { VueSkeletonLoader },\n};"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<template>\n  <div class=\"facebook-card\">\n    <p>Loading user profile...</p>\n    <skeleton-loader-vue\n      type=\"circle\"\n      :width=\"100\"\n      :height=\"100\"\n      animation=\"wave\"\n      color=\"#e0e0e0\"\n      wave-color=\"#f5f5f5\"\n    />\n    <div style=\"margin-top: 10px;\">\n      <skeleton-loader-vue\n        type=\"rect\"\n        :width=\"250\"\n        :height=\"20\"\n        rounded\n      />\n      <skeleton-loader-vue\n        type=\"rect\"\n        :width=\"200\"\n        :height=\"15\"\n        style=\"margin-top: 5px;\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport VueSkeletonLoader from 'skeleton-loader-vue';\n\nexport default {\n  name: 'UserProfileLoader',\n  components: { VueSkeletonLoader },\n  mounted() {\n    console.log('Skeleton loader component mounted.');\n  }\n};\n</script>\n\n<style scoped>\n.facebook-card {\n  border: 1px solid #eee;\n  padding: 20px;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 300px;\n  margin: 20px auto;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\np {\n  color: #888;\n  font-size: 14px;\n  margin-bottom: 15px;\n}\n</style>","lang":"vue","description":"This example demonstrates how to integrate `skeleton-loader-vue` into a Vue component to display a user profile loading state, using circle and rectangle types with custom dimensions and animations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}