CSS Animation Weekly #105 — Radial progress bars in Vue, Stacking with CSS animation and more

Last week we were making animated menus with React, this week we’re looking at how to create animated progress bard with VueJS! We’re also hopelessly addicted to an amazing pure CSS stack game, and enjoying a load of cool inspiration.


Donovan at CSSAnimation.rocks


Creating Animated Radial Progress Bars with SVG, CSS and VueJS — medium.com

Learn how to create awesome animated radial progress bars with VueJS!

Pure CSS Stack


This is amazing, a fully playable stack game created with CSS and HTML!


Meta poster a5e44e6a26dd8fbf07e1d3e65d1318638dabb236930660b17c53eb25ace70846

Keyframes — keyframes.net

If you’re looking for community, inspiration and ideas, check this out! Keyframes is the hangout spot for animators. Talk about your projects, ask questions, and learn from each other.



The handbook download animation — codepen.io

Super-slick hover effects and multi-coloured box shadows on these 3D cards!


Pure CSS <table> flip toggle! 😉🎉 — codepen.io

Flip this table — very cute use of 3D CSS animation


Flip Button — codepen.io

Background animation makes this button stand out

39255.qynnmd.db637ae4 eb48 449d bea3 5ec1279b3061

Uncomfortable: ELL & You — codepen.io

Neat use of rotation and CSS animated lines to connect these two elements


CSS 3D Cube turned menu — codepen.io

I love this art style, and the use of CSS 3D cubes to create a nice hover animation effect


HBM cover — codepen.io 
 Just for fun: a ‘fork’ of a German HBM cover….


Metaballs — codepen.io

Blobby orbiting blobs of awesomeness


Spinning Lines — codepen.io

An addictive little effect created using animation delay and rotation 😵