forum

home / developersection / forums / create svg progress bar to move anti clockwise using css.

Ask Question

Create SVG progress bar to move anti clockwise using CSS.

Steilla Mitchel 440 20-Jul-2023

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

css-css3 css  css animation 
Updated on 21-Jul-2023
Steilla Mitchel

Student

I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Follow
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

21-Jul-2023

Sure, here is how you can create an SVG 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:
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:

<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.

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy