9 October 2017 / Loading

Healthy.io Logo Full Loader with css

CREATE A BEAUTIFUL ANIMATED LOADER WITH NOTHING BUT CSS

"An example of how creative you can be with pseudo-elements and keyframe animations. Used in this case to build a loader animation without the need to fetch any JS or images."

View demo Download Source

Made with

Html
Css

Author

Julien Benchetrit

Demo

See the Pen Healthy.io Logo Full Loader (CSS Only) by Julien Benchetrit (@julienben) on CodePen.

— Code Tea —

Loading

12 June 2018

CSS Dash Loader

Rotating dashes.

12 June 2018

Tomato loader with CSS vars

Doesn't work in Edge due to lack of support for calc() as an animation-delay value.

12 June 2018

20 lines of CSS and 4 lines of generated SVG

No JS, cross-browser, minimal code. 20 lines of CSS and 4 lines of generated SVG.

— Next Post —

10 October 2017

World clock to include the day of the week and the weather

Thus it was high time I redesigned my world clock to include the day of the week and the weather where we all live!

— Prev Post —

09 October 2017

MAKING RESPONSIVE GRID WITH FLEXBOX AND LESSJS

"In this article, I will cover the concepts to create your own configurable Grid framework based on FlexBox."