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: