Customizable Skeleton Loaders icon

Customizable Skeleton Loaders

Go to Website
Hot or Not
Customizable Skeleton Loaders

Description

This product includes 16 skeleton loaders. Skeleton Loaders are typically used as a loading state that displays briefly before the actual data loads onto the screen. It is meant to provide a visual guide as to what the real data loading in will look like.

Included with this purchase is an HTML file, a CSS file and documentation on getting started. This product was developed in Visual Studio Code.

The HTML file includes: -Four skeleton loader variations to mimic a “post” -Four skeleton loader variations to mimic a “row of data” -Four skeleton loader variations to mimic a “vertical rectangular card view” -Four variations for a “square card view”

The background color for all is defaulted to white and the skeleton overlay is defaulted to silver but are customizable by replacing the color in the HTML file with a listed color from the CSS file (More details included in the documentation).

Loaders come with a shining effect CSS animation and box shadow that you can remove if desired.

-The “post” skeleton loaders will take the 80% of the width of the parent container with a max-width of 500px -The “row of data” skeleton loaders will take 90% of the width of the parent container with a max-width of approximately 900px -The “vertical rectangular card view” will take 95% of the width of the parent container with a max-width of 200px and a height of 280px -The “square card view” has a set width and height of 250px.

If you are familiar with CSS knowledge, you can adjust these as necessary. It is both desktop and mobile friendly. For tablet & mobile screens (Less than 1023 pixels), the width for all loaders default to 95% of the parent container with the max-width mentioned above still applied. Details on how to customize this is included in documentation.

Categories

Animations And EffectsCss

Tags

loaderloaders

External listing. code.market does not sell this product and does not process payment for it. Pricing, payment, delivery, licensing, refunds, and support are handled by the third-party merchant on its own website. We may earn an affiliate commission from a referral. Details.

Products of the Week.

Submit