Tag: HTML5

Chasing circles – CSS animation examples

The animated loading icon is created from four circles. The circles haven’t any fill, however, have alternating stroke-colors. <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340"> <circle cx="170" cy="170" r="160" stroke="#E2007C"/> <circle cx="170" cy="170" r="135" stroke="#404041"/> <circle cx="170" cy="170" r="110" stroke="#E2007C"/> <circle cx="170" cy="170" r="85" stroke="#404041"/> </svg> In our CSS, we are able to set some

Cross my hamburger – CSS animation examples

This animation is employed everywhere the net, turning 3 lines into a cross or shut icon. till fairly recently, the bulk of implementations are achieved victimization markup language components, however really SVG is far additional suited to the current reasonably animation – there’s not a requirement to bloat the code of your button with multiple