NEW PLUGIN: Skeleton Content Preloader

Showcase Plugins
1

Hey everybody!

I just published a new plugin that allows you to add an animated loading placeholder to any element / RG’s while your page / RG is loading. This is a simple and easy-to-use way to make your app more user-friendly.

Demo: Skeleton | Demo
Editor: SkeletonPluginDemo | Bubble Editor

You can always reach out to me for any questions / suggestions and bug reports! Let’s rock🚀

See comment 2 or 7 if you don’t want to pay for this :slight_smile:

1 Like
2

nice job @Vladislav_S it looks interesting but you leave me no choice to buy. I’ll consider whether to take a subscription

3

Welcome. Please try harder.

Ahem. Adding a CSS style to the header is not worth $60 once.

And this :point_down:is not a plugin. It’s just a few lines of CSS. What stupid get-rich-quick Medium article sent you here?

<style>
    /* Keith: properties.id is your element's HTML ID */    
    #${properties.id} {
        /* Keith: properties.bg is your desired background color */
        background-color: ${properties.bg} !important;
        background: linear-gradient(
            /* Keith: you can guess what properties.degree is, yes? */
            ${properties.degree}deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, .5) 50%,
            rgba(255, 255, 255, 0) 60%
            ) ${properties.bg};
            background-size: 200% 100%;
            background-position-x: 180%;
            /* Keith: of course you know what properties.speed is ... etc. */
            animation: ${properties.speed}s loading ${properties.profile} infinite;
        }
        @keyframes loading {
            to {
                background-position-x: -20%;
            }
        }
        .loading #${properties.id} {
            min-height: 4rem;
            border-radius: 4px;
            animation-delay: .06s;
        }
</style>
5 Likes
4

I also dig the new account that has never posted before that simply has no choice but to buy the plugin 15 minutes after it was posted. Yup, I’m sure that’s legit.

Come on, folks… we’re trying to have a community here.

2 Likes
5

Jesus Christ, thank you, Keith! I will also think about making it cheaper to buy

6

This is one of my clients. I asked him to support me here and write something

7

I respect your honesty, friend, but that doesn’t make it better.

Anyway, best of luck with your plugin.

9

Hey, look, I minified it for you:

function(instance, properties, context) {
// possibly worth $1 - $3 once...
var n=`<style>\n#${properties.id} {\n  background-color: ${properties.bg} !important;\n  background: linear-gradient(\n    ${properties.degree}deg,\n    rgba(255, 255, 255, 0) 40%,\n    rgba(255, 255, 255, .5) 50%,\n    rgba(255, 255, 255, 0) 60%\n  ) ${properties.bg};\n  background-size: 200% 100%;\n  background-position-x: 180%;\n  animation: ${properties.speed}s loading ${properties.profile} infinite;\n}\n\n@keyframes loading {\n  to {\n    background-position-x: -20%;\n  }\n}\n.loading #${properties.id} {\n  min-height: 4rem;\n  border-radius: 4px;\n  animation-delay: .06s;\n}\n</style>`;$("head").append(n);}
5 Likes
10

Oh, really, after showing here what exactly is this CSS? Well, now I’m sure things will go uphill. Thanks!