SVG Logo Draw-In Loader — Stroke-Dashoffset Wordmark Loading Animation
SVG Logo Draw-In Loader · Loaders · Plain HTML & CSS · Live preview
Copy & paste
Source Code
<div class="ld-stage">
<svg class="ld-svg" viewBox="0 0 200 200" fill="none">
<!-- Abstract geometric mark: an interlocking triangle + diamond outline,
a stand-in for a real brand wordmark/logo. -->
<path class="ld-path ld-outer" d="M100 20 L172 70 L146 158 L54 158 L28 70 Z" stroke-linecap="round" stroke-linejoin="round"/>
<path class="ld-path ld-inner" d="M100 62 L134 116 L66 116 Z" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="ld-label" id="ldLabel">Loading</div>
</div>*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0f1a;min-height:100vh;display:flex;align-items:center;justify-content:center}
.ld-stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.ld-svg{width:140px;height:140px}
.ld-path{stroke:#818cf8;stroke-width:3}
.ld-outer{stroke-dasharray:420;stroke-dashoffset:420;animation:ldDrawOuter 3.6s cubic-bezier(.65,0,.35,1) infinite}
.ld-inner{stroke:#22d3ee;stroke-dasharray:180;stroke-dashoffset:180;animation:ldDrawInner 3.6s cubic-bezier(.65,0,.35,1) infinite}
/* Draw in over the first ~40% of the loop, hold fully drawn, then draw back
out (reverse) over the final ~30% before resetting to start the loop again
— the stroke itself IS the loading animation, not a spinner layered on top
of a static logo. */
@keyframes ldDrawOuter{
0%{stroke-dashoffset:420}
38%{stroke-dashoffset:0}
62%{stroke-dashoffset:0}
100%{stroke-dashoffset:-420}
}
@keyframes ldDrawInner{
0%,10%{stroke-dashoffset:180}
48%{stroke-dashoffset:0}
62%{stroke-dashoffset:0}
100%{stroke-dashoffset:-180}
}
.ld-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b7591}
.ld-label::after{content:'';display:inline-block;width:0;overflow:hidden;vertical-align:bottom;animation:ldDots 1.4s steps(4) infinite}
@keyframes ldDots{to{width:1.4em}}
@media (prefers-reduced-motion:reduce){.ld-path,.ld-label::after{animation:none;stroke-dashoffset:0}}Extend with AI
Take This Snippet Further With AI
The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.
What's included
Features
About this UI Snippet
SVG Logo Draw-In Loader — The Outline Itself Is the Loading Animation
Most loading indicators are generic — a spinner or bar that could belong to any product. A logo draw-in loader instead uses the brand's own mark as the animation: its outline draws itself stroke by stroke, holds fully formed for a beat, then draws back out and repeats, so the wait itself reinforces the brand rather than showing an interchangeable spinner borrowed from any other site. This snippet builds the technique with an abstract geometric mark (a triangle-and-diamond outline, standing in for a real logo shape) in plain HTML, CSS, and SVG — no JavaScript required, the whole animation is stroke-dashoffset keyframes.
The stroke-dasharray / stroke-dashoffset trick
Each <path> is given a stroke-dasharray equal to its own total path length (measured by inspecting the rendered path, or approximated), which turns the stroke into one dash exactly as long as the path with no gap. Setting stroke-dashoffset to that same length shifts the entire dash out of view, so nothing is visible — the path is present in the DOM but invisible. Animating stroke-dashoffset from that full length down to 0 slides the dash back into view along the path, which reads as the line drawing itself in real time, tip to tail. This is the same fundamental technique used for animated SVG checkmarks and signature effects, applied here as a continuously looping loader instead of a one-shot reveal.
Draw in, hold, draw out — not just a fade
The keyframes don't stop at a drawn-in state; ldDrawOuter and ldDrawInner animate to stroke-dashoffset: 0 by roughly 40% of the loop, hold there until about 60%, and then continue past 0 to a negative offset equal to the path length — which slides the dash back out the far end, undrawing the line in the same direction it was drawn, rather than reversing the draw motion backward. That three-phase shape (draw in, hold, draw out) is what makes the loop read as a deliberate, repeating gesture instead of a shape that merely fades or flickers.
Two paths, gently offset
The inner diamond's keyframes are nudged so it begins drawing slightly after the outer shape and finishes its hold slightly earlier, giving the two strokes a small independent rhythm rather than animating in perfect lockstep — a subtlety that keeps a two-part mark from reading as one flat, single-timed animation.
Why an abstract mark here
The shape in this snippet is a simple interlocking geometric outline, deliberately generic so the pattern is obviously a demonstrable technique rather than tied to any specific company. Swap the <path> data for your own logo's outline (most vector logo files export as SVG path data directly, or can be traced from one), recompute stroke-dasharray to match the new path's length, and the draw-in mechanics carry over unchanged.
A no-JavaScript, CSS-only loader
Because the entire effect is expressed as CSS @keyframes on stroke-dashoffset, there's no JavaScript driving the animation at all — it's as lightweight and dependency-free as a spinner, but branded. Pair it with a top loading bar for a route transition underneath, or an orbit loader as a non-branded fallback where a wordmark doesn't fit.
Step by step
How to Use
- 1Paste HTML, CSS, and JSThe outline mark begins invisible and starts drawing itself in immediately.
- 2Watch the full cycleIt draws in, holds fully formed for a moment, then draws back out and repeats.
- 3Swap in your own logoReplace the path "d" data with your logo's outline (export as SVG path data).
- 4Recompute the dash lengthSet stroke-dasharray/stroke-dashoffset to match your new path's total length.
- 5Tune the timingAdjust the keyframe percentages to change how long it holds versus draws.
- 6Restyle itChange the stroke colors and width to match your brand.
Real-world uses
Common Use Cases
stroke-dashoffset.Got questions?
Frequently Asked Questions
Each path's stroke-dasharray is set to its own total length, turning the stroke into one dash exactly as long as the path with no visible gap. Setting stroke-dashoffset to that same length shifts the dash entirely out of view. Animating dashoffset down to 0 slides the dash back into view along the path, which reads as the line drawing itself in from start to end.
Render the path in a browser and read its length via the DOM API: document.querySelector('path').getTotalLength(). Use that number for both stroke-dasharray and the starting stroke-dashoffset. Since this snippet is CSS-only, you would either hardcode the measured value or add a small script that sets it from getTotalLength() once on load.
The keyframes continue past stroke-dashoffset: 0 to a negative value equal to the path length, which slides the dash out the far end in the same direction it drew in, undrawing the line rather than reversing the draw motion. This keeps the loop reading as one continuous directional gesture rather than a draw-then-fade that would look like two different effects stitched together.
Yes — export your logo as an SVG and use its path data directly in the path d attribute (most vector logo files, including ones from Illustrator or Figma, export cleanly to SVG paths). This snippet uses an abstract geometric mark specifically so the pattern reads as a demonstrable technique rather than being tied to any one company's branding.
Render the SVG markup as-is inside a component — the animation is pure CSS with no JavaScript dependency, so it needs no lifecycle hooks or state. If your logo path length varies per instance, compute it once with getTotalLength() in a mount effect and set the dasharray/dashoffset as inline styles or CSS custom properties instead of hardcoding them.