Skip to content
Fitness Rich #running#gait#biomechanics

Running Gait Cycle

Stance, swing, flight - the four phases of a running stride and where injuries arise.

A free, animated running gait cycle you can read here or embed on any website, from Scrollchart.

Running Gait Cycle

Running Gait Cycle4 phases · GRF curve (% bodyweight) · common injury sites1Initial Contact0-12% cycleKnee (impact)2Midstance12-50% cyclePlantar fascia3Propulsion50-62% cycleCalf / Achilles4Swing62-100% cycleHip flexor0×BW1×BW2×BW3×BWGait cycle (%)GRFNo ground contact~2.5× BW~2.5× BW

A circular gait diagram with four phases: initial contact, midstance, propulsion, swing. Force-curves and joint-angle annotations at each phase. Common injury sites mapped to phase: heel strike (knee), midstance (foot), propulsion (calf/Achilles).

Good for

  • Running form articles
  • Running injury content
  • Coach education

Source & accuracy

This running gait cycle is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

The phases of the running stride

The running gait cycle describes one complete stride for a single leg, from initial ground contact to the next contact of the same foot. It divides broadly into stance (when the foot is on the ground) and swing (when it is in the air). Unlike walking, running includes a flight phase in which neither foot touches the ground, which is the defining mechanical difference between the two.

Within stance, the foot moves through initial contact, midstance where the body passes over the planted foot, and propulsion as the foot pushes off. Swing carries the leg forward to prepare for the next contact.

Where running injuries tend to arise

The stance phase is where the body absorbs ground reaction forces of several times body weight, so it is closely studied in relation to injury. Loading patterns at initial contact and during midstance are linked to stresses at the foot, shin, knee, and hip.

Many common running injuries are overuse conditions tied to cumulative loading, training errors, and mechanics rather than a single event. Gradual progression in volume and intensity is the most consistently supported way to reduce risk, and persistent pain warrants assessment by a qualified clinician.

Embed this diagram

Add this animated running gait cycle to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated running gait cycle for any website.
Who uses it
Fitness blogs, Sports blogs, Coaches & personal trainers.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="running-gait-cycle" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Running Gait Cycle" for my website?
Scrollchart provides "Running Gait Cycle" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a running gait cycle diagram in a health or wellness blog?
Copy the HTML snippet from the Scrollchart diagram page and paste it into any post or page in your CMS. It works in WordPress, Webflow, Ghost, Substack, and plain HTML without any plugin or account. The diagram renders as animated SVG directly in your page, so search engines can index the accompanying explainer text.