Animated rotating text circle in Elementor

Overview

The animated circle with rotating text is one of the most recognizable micro-animations on modern portfolio and agency sites - eye-catching, essentially zero performance cost because it's pure CSS.

This resource walks through the cleanest Elementor implementation.

Steps

1. Create a new Section in Elementor and set a fixed height (e.g. 200px).
2. Drag a Heading widget in and type the text you want to spin around the circle.
3. Open the Advanced tab → Custom CSS and paste the snippet below.
4. (Optional) Place an SVG path or image in the center as a logo.

CSS snippet

.circle-text {
  position: relative;
  width: 200px;
  height: 200px;
  animation: spin 20s linear infinite;
}

.circle-text span {
  position: absolute;
  left: 50%;
  font-size: 14px;
  letter-spacing: 4px;
  transform-origin: 0 100px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

Tips

• On mobile, reduce width/height to ~120px to avoid overflow.
• If you use multiple spinning elements on the same page, consolidate the animation into a single stylesheet to reduce reflow.
• transform-origin must equal half the circle width so the text tracks the correct circular path.

Click the button above to see the full walkthrough with screenshots at the original source.