> Canonical URL: https://codingcat.dev/course/css-animations/lesson/round-loading-indicator

# Round Loading Indicator | CSS Animations | CodingCat.dev Course

[🧶 CSS Animations](/course/css-animations)Section 3.1 · Lesson 3 of 4[← Prev Lesson](/course/css-animations/lesson/3_1-js-confetti)[Next Lesson →](/course/css-animations/lesson/material-checkbox-without-material)

# Round Loading Indicator

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/671fd9aec13d5492f74786cfc9626e5f5dd1852c-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)

In this HTML snippet you can see that we are using a span that has a special `data-value` attribute. This allows us to store the current value on the HTML element depending on how much loading has occured. There is also a SVG element here that has a stroke yellow and what is more important though is the stroke width of 20, this will set how large the animated portion of the SVG will be displayed.

Copied! 🐾

```

```

In this CSS the broder-radius

Copied! 🐾

```
.progress-circle{
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  outline: 1px solid var(--yellow);
  outline-offset: -1px;
}
.progress-circle::after,
.number{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
.progress-circle::after{
  content:'';
  width: 110px;
  height: 110px;
  border-radius: inherit;
  outline: inherit;
}
.circle{
  stroke-dasharray: 410;
  stroke-dashoffset: 410;
  transform: rotate(-90deg);
  animation: bar-fill 8s linear forwards;
  animation-iteration-count: infinite;
}
@keyframes bar-fill {
  100% {
    stroke-dashoffset: 0;
  }
}

```

You will notice that in the below [Codepen](https://codepen.io/codercatdev/pen/vYdpGNW) there is some JavaScript, this is just for updating the text to say `true` or `false`.

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: CSS Animations: Round Loading Indicator✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for CSS Animations: Round Loading Indicator: start with Feedback, implement CSS Animations, and ship to production.AAA Contrast Verified[Course Outline](/course/css-animations)

## CSS Animations

3/41

### Buttons

- [1.1Material Hamburger Button](/course/css-animations/lesson/1_1-hamburger-button)

2

### 3rd Party Libraries

- [2.1JavaScript Confetti library](/course/css-animations/lesson/3_1-js-confetti)

3

### Feedback

- [3.1Round Loading Indicator▶](/course/css-animations/lesson/round-loading-indicator)

4

### Inputs

- [4.1Material Checkbox without Material UI (only CSS)](/course/css-animations/lesson/material-checkbox-without-material)