Welcome to Auto Skelly!

This library is built to help you easily 'skellify' your objects with a few easy shapes.

Why use AutoSkelly?

It is well known that load time of on-screen content is an important part of user satisfaction. However, if the on-page content is complex and 'heavy' (lots of images for example), load times can take over a second. To help improve the user experience, the concept of 'skeletoning' was created. Essentially, a placeholder view of the relevant content is created which is loaded quickly and replaced dynamically as soon as the actual content becomes available. Examples of this in the real-world are sites like YouTube, which rely heavily on skeletons when loading image-heavy pages.

The first card below is what an example loaded card would look like. The second card is what AutoSkelly does to cards that are in the process of loading. The magic of AutoSkelly is that you don't need to design special skellified cards for your load screens. Instead, you just duplicate the element you would use for your loaded page, add some simple filler text or images, and pass in the AutoSkelly classes.

Getting Started

Getting your page skelified is super simple! You will need the autoskelly.js file, the autoskelly.css file and minified jQuery. Place the autoskelly files in the root directory of your project and then call the js file from the bottom of your body section of your index.html as shown below.

That's all there is to it! From here, you can start customizing how you want the skellification to work. Check out the examples below to improve your user experience in minutes.

Examples

Text

If you want to skellify some text, simply add skelly-text in the class of any text you want to adapt. Auto Skelly will automatically determine the relevant height and width. Notice that this provides some border radius by default.

HTML Code

The skelly-text class can be added to any p tag in your code, of any height, and it will automatically produce the correct height skeleton. Notice that the two code fragments are exactly the same save for the skelly class.

Images

If you want to skellify an image, simply add skelly-image in the class of any image you want to adapt. Auto Skelly will automatically determine the relevant height and width. Notice that this provides no border radius by default in order to fill the entire space of the image.

HTML Code

The skelly-image class can be added to any img tag in your code, of any height, and it will automatically produce the correct height skeleton. Notice that the two code fragments are exactly the same save for the skelly class.

Circles

Circle elements are common for things like profile pictures, so if you want to skellify a circle, simply add skelly-circle in the class of any circle you want to adapt. Auto Skelly will automatically determine the relevant height and width.

HTML Code

The skelly-circle class can be added to any img tag or div tag in your code, of any height, and it will automatically produce the correct height skeleton. Notice that the two code fragments are exactly the same save for the skelly class.

Buttons

Explicit buttons on cards that need to be loaded are common, so auto skelly offers a class that will help make the look of these buttons 'disabled' while the class is applied. To use this feature, simply add skelly-button in the class of any button you want to adapt. Auto Skelly will automatically determine the relevant height and width of the text in the button and will create the skeleton look.

HTML Code

The skelly-button class can be added to any button element in your code, of any height, and it will automatically produce the correct height skeleton. Notice how the elements shown have their own styling classes already. Auto Skelly takes note of these styles to make sure that the height and width are exactly what you want.

Customization

Change Color

Having a library to auto-skelify your components is great, but we can take this one step further to provide your users the best experience possible. By creating an AutoSkelly() object, you can configure a bunch of things about how the skeletons look and allow your end users to directly modify the look of their skeletons! One possible way to use this is feature is to provide your users with some 'Theme' options, so if they want a dark theme, the skellies will be lighter. If they want a light theme, the skellies will be darker. However, given that you can add any color you like with the AutoSkelly object, the sky's the limit!

Press any of the buttons below to give it a try! The theming happens dynamically and applied to all skellies (try scrolling up to other examples after clicking to see how they change as well!)

JavaScript Code

The AutoSkelly() gives you access to a function called changeSkellyColor() which accepts a HEX string input and will use that color to theme all skellies. Use the code below to get started.

Change Animation Type

To further provide a more diverse set of customizability and theming opportunities, AutoSkelly() gives you access to a few different kinds of animations. All crafted for you! All you need to do is specify the kind of animation.

Press any of the buttons below to give it a try! The theming happens dynamically and applied to all skellies (try scrolling up to other examples after clicking to see how they change as well!)

Please note that the gradient option comes with its own color options which you would need to overide if you wanted to make them your own. Check the API below for more on this.

JavaScript Code

The AutoSkelly() gives you access to a function called changeSkellyColor() which accepts a HEX string input and will use that color to theme all skellies. Use the code below to get started.

Activate or Deactivate AutoSkelly

In the case that user's don't want to see animations of any kind when page contents is loading, you can use the activateSkelly() to specify the user's preference.

Press either of the buttons below to give it a try! The theming happens dynamically and applied to all skellies (try scrolling up to other examples after clicking to see how they change as well!)

Please note that the gradient option comes with its own color options which you would need to overide if you wanted to make them your own.

JavaScript Code

The AutoSkelly() gives you access to a function called activateSkelly() which accepts a true or false input. Use the code below to get started.

API

AutoSkelly gives you a bunch of options that you can use to configure autoskelly yourself, or access through the provided methods.

Options

Functions

The functions of AutoSkelly allow you to modify particular things about the skelletons themselves dynamically in other to make them fit your theme, or just improve the user experience overall.

Known limitations

AutoSkelly works by grabbing the size of given elements on first attempted render by your browser and using that height and width to create the right size skeleton. If you resize your browser window after the first load (and the autoskelly instances are not replaced by the intended content) you will see that some skeletons won't resize correctly anymore. This is known and okay since the primary use case for these skeletons is to act as a placeholder for real content arriving soon. This is just a heads up in case some of your content takes a very long time to load and your users enjoy resizing their windows while waiting!

Thank you for using AutoSkelly! If you have any questions about the library, please feel free to reach out to me at alex@alexgordienko.com