Ajax Loader
×

Ironman SVG Line Animation

This is a SVG made up of individual lines so that the animation starts from multiple places, rather than looking as though its a single line. This utilises stroke-dashoffset and stroke-dasharray to achieve the results. This would be a good load screen or you could have it as an animation when the page loads, adjusting the animation time to something like 999s and adjusting the animation percentages accordingly would be one way of doing that. The finished product took around 3 hours to complete (most of that time was spent creating the SVG and then 'trimming' the exported code.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Ironman SVG Line Animation

    CSSDeck G+