Pure (S)CSS Responsive Loading Indicator (Spinner)

I used to use a lot of spinners, really.
Animated gifs, JS-based, mixed HTML+CSS, inline, full-page.
Finally I made one myself, to meet this requirements:
– No more animated GIF (it’s 2016)
– No images at all
– No extra HTML
– No extra HTML added by JS
– because no JS too
– No size adjusting – it should work with any given parent HTML element
– optionally disable target content by semitransparent mask
– No unnecessary blinking in case of background process fast finish
– Visible on any background
– looking good

So meet my Busy Indicator:

See the Pen responsive-scss-spinner by Yuri Gor (@yurigor) on CodePen.dark

It’s SCSS based, so feel free to adjust it for your taste.

Core techniques used to create it:
CSS3 animation used to rotate :before and :after pseudo-elements with border-radius 50%, transparent top and bottom borders and animated color of left and right borders.
Delay and smooth fade in effect made by animation of opacity and visibility properties.
Padding-bottom with percentage value used to keep width/height ratio when resizing.
Both :before and :after elements used, so mask implemented by box-shadow.
user-select and pointer-events css properties set to none, but there is still possibility to set focus on parent element by TAB key, please, handle it by yourself if you care.

Leave a Reply

Your email address will not be published. Required fields are marked *