npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-skeletor

v1.0.6

Published

Vue 3 Skeleton Loading component.

Downloads

83,076

Readme

💀 Vue Skeletor (Vue 3 Skeleton Loading component)

Vue 3 adaptive skeleton loading component that will match your typography.

Codesandbox Card Example

Installation

npm install vue-skeletor -S

Why adaptive skeletons?

Skeletons are used to mimic how the real content would look, so in order to create nice skeleton you would have to manually create squares, circles and position/size them to match your real component and keep it updated whenever you change it.

Aww sounds awful isn't it?

Wouldn't be nice if you had a skeleton that automatically adjusts to your existing components layout? I think it would =) so the Vue Skeletor comes to rescue.

Instead of creating separate skeleton components you can inject skeletons directly into your existing components.

Example:

  <template>
    <div class="post">
      <div class="post__image">
        <img 
          v-if="post" 
          :src="post.img"
          height="200"
        />

        <!-- A simple 200px height rect which mimics the post image  -->
        <Skeletor v-else-if="isPostLoading" height="200"/>
      </div>
        
      <div class="post__title">
        <template v-if="post">
          {{ post.title }}
        </template>

        <Skeletor v-else-if="isPostLoading">
      </div>

      <div class="post__text">
        <template v-if="post">
          {{ post.text }}
        </template>

        <template v-else-if="isPostLoading">
          <!-- Creating 5 skeletons that mimics the text -->
          <Skeletor v-for="i in 5">
        </template>
      </div>
    </div>
  </template>

And that's it, the text skeletons will automatically catch up with the styles you defined for the title and text elements.

Basic Usage

First import the Skeletor styles

  import 'vue-skeletor/dist/vue-skeletor.css';

Option 1 - Register Locally

  // SomeComponent.vue
  import { Skeletor } from 'vue-skeletor';

  export default {
    components: { Skeletor }
  }

Option 2 - Register Globally

  // main.js
  import { Skeletor } from 'vue-skeletor';

  app.component(Skeletor.name, Skeletor);
  <!-- And use in your <template> or JSX -->
  <Skeletor /> 

Global Configuration

If you want you can globally turn off the shimmer animation using the Skeletor Plugin usage.

  // Import the plugin
  import VueSkeletor from 'vue-skeletor';

  // Register plugin in your vue app
  app.use(VueSkeletor, {
    shimmer: false,
  })

useSkeletor

When you install skeletor as Plugin it provides global config to your app and you get access to 'useSkeletor' composable which will inject the skeletor config object through which you can set any global config at runtime.

  // Import the composable
  import { useSkeletor } from 'vue-skeletor';

  export default defineComponent({
    setup() {
      // In your setup function use the composable
      const skeletor = useSkeletor();

      // Set the shimmer config
      skeletor.shimmer = false;
    }
  })

Width

width: number | string

  <!-- Both are same and evaluate to 100px -->
  <Skeletor width="100"/>
  <Skeletor :width="100"/>

  <!-- Any valid css value for width property -->
  <Skeletor width="50%">

Width of your skeleton, can be a number or css string value.

Height

height: number | string

  <!-- Both are same and evaluate to 100px -->
  <Skeletor height="100"/>
  <Skeletor :height="100"/>

  <!-- Any valid css value for width property -->
  <Skeletor height="50%">

Height of your skeleton, can be a number or css string value.

⚠️ Notice

When you set height, your skeleton automatically becomes a rect with display: block meaning it will no longer adapt to your typography, which is useful for creating non text block level skeletons like image placeholders, buttons, and e.t.c.

Size

size: number | string

  <!-- Creates a 100x100 square -->
  <Skeletor size="100"/>

Size sets both width & height to simplify creating square/circle shapes

Circle

circle: boolean (default: false)

  <!-- Creates a 50x50 circle -->
  <Skeletor circle size="50"/>

As the name suggest it just turns the element into a circle, use only when width & height or size is set.

Pill

pill: boolean (default: false)

  <Skeletor width="200" height="50" pill/>

Makes rectangular skeletons fully rounded, useful when creating rounded button or chip and e.t.c shapes.

Shimmer

shimmer: boolean

  <Skeletor :shimmer="false"/>

Optionally you can turn off/on specific skeleton's shimmer animation, it is based of your global config, if you disable shimmer globally, then this prop should be set accordingly.

As

as: string (default: 'span')

  <Skeletor :size="100" as="div"/>

By default skeletons are rendered as span tags, but you can change it using this prop.

Customizing the style and animation

Skeletor uses bem classes, that you can use to override your skeletons color and shimmer animation and you have the full control over how your skeletons look, there is no need for any javascript api for this in my opinion.

  /* Static background */
  .vue-skeletor {
    background-color: #ccc;
  }

  /* 
    If you have theme switching in your app for example
    from light to dark, you can target skeletons under 
    some global theme class or attribute e.g. 
  */
  [data-theme="dark"] .vue-skeletor {
    background: #363636;
  }

  /* 
    Text skeleton
    By default skeletor uses fully rounded style for text
    type skeletons, you can change that as you like
  */
  .vue-skeletor--text {
    /* Completely square style skeletons */
    border-radius: 0;
  }

  /* Shimmer */
  .vue-skeletor:not(.vue-skeletor--shimmerless):after {
    /* 
      Change the shimmer color, its a simple 90 deg 
      linear horizontal gradient, adjust it however
      you like.
    */
    background: linear-gradient(
      90deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,1) 50%, 
      rgba(255,255,255,0) 100%
    );

    /* Change any css keyframes animation property */
    animation-duration: 2s; 
    animation-timing-function: ease-in-out;
    /* ... */

    /* 
      Or implement your custom shimmer css animation 
      if you want it's pure css no magic happening =)
    */
  }

  /* Default keyframes used in skeletor */
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }