leostratus/x-status-hud

A spinner-HUD component to notify a user that the app is blocked/working.

============

A spinner-HUD component to notify a user that the app is blocked/working.

A modal web component that contains a CSS spinner and a label. Style 'x-status-hud' as you would any other vanilla HTML element. To learn how it was made, go read this article.

x-status-hud was inspired by x-spinner. This is kind of like x-spinner-lite as it was built for a tutorial on creating X-Tags that Angelina wanted to be beginner-friendly.

x-status-hud's Issues

Transition animations

Pretty fade-in and fade-out with slight easing?

Tap or click to dismiss HUD

Should dev be able to specify if it is dismissible?

Make demo default styling way more vanilla

demo was prettified for use in a tutorial on the Hacks blog, should strip away everything and provide absolute barebones structural CSS. Can still use fancy demo as an example of styling the HUD in another set of assets

Option to use IMG/animated gif instead of CSS spinner

Or just let the dev customize the innerHTML of that 'spinner' div so that they can put whatever they want there (even if nothing at all)