---
title: "Create SVG progress bar to move anti clockwise using CSS."  
description: "Create SVG progress bar to move anti clockwise using CSS."  
author: "Steilla Mitchel"  
published: 2023-07-20  
updated: 2023-07-21  
canonical: https://www.mindstick.com/forum/159187/create-svg-progress-bar-to-move-anti-clockwise-using-css  
category: "css-css3"  
tags: ["css", "css animation"]  
reading_time: 2 minutes  

---

# Create SVG progress bar to move anti clockwise using CSS.

Create [SVG](https://www.mindstick.com/forum/158011/how-to-manipulate-svg-foreign-object-html-text-wrapping-and-positioning) [progress bar](https://www.mindstick.com/articles/12747/android-progress-bar) to move anti-clockwise using CSS.

## Replies

### Reply by Aryan Kumar

Sure, here is how you can create an SVG [progress](https://yourviews.mindstick.com/view/284/devotees-arrived-in-prayagraj-while-work-is-still-in-progress) bar that moves anticlockwise using CSS:

1. Create an SVG file with a `<path>` element. The `<path>` element should have a `d` attribute that defines the shape of the progress bar.
2. Set the `fill` attribute of the `<path>` element to a linear gradient. The linear gradient should have two stops, one at 0% and one at 100%. The stop at 0% should have a color of black, and the stop at 100% should have a color of white.
3. Set the `transform` attribute of the `<path>` element to `rotate(-90)`. This will rotate the progress bar anticlockwise by 90 degrees.
4. Set the `animation` property of the `<path>` element to the following:

```plaintext
animation: progress 2s linear infinite;
```

This will create an animation that rotates the progress bar anticlockwise for 2 seconds, and repeats the animation infinitely.

Here is an example of how you can create an SVG progress bar that moves anticlockwise using CSS:

```plaintext
<svg viewBox="0 0 100 100">
  <path
    d="M 0,0 A 50,50 0 0 1 100,0"
    fill="url(#gradient)"
    transform="rotate(-90)"
  />
  <linearGradient id="gradient">
    <stop offset="0%" stop-color="black" />
    <stop offset="100%" stop-color="white" />
  </linearGradient>
</svg>
```

This code creates an SVG file with a `<path>` element that has a shape of a circle. The `<path>` element has a `fill` attribute that defines a linear gradient with two stops. The stop at 0% has a color of black, and the stop at 100% has a color of white. The `<path>` element also has a `transform` attribute that rotates the progress bar anticlockwise by 90 degrees. Finally, the `<path>` element has an `animation` attribute that creates an animation that rotates the progress bar anticlockwise for 2 seconds, and repeats the animation infinitely.


---

Original Source: https://www.mindstick.com/forum/159187/create-svg-progress-bar-to-move-anti-clockwise-using-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.