Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have does animate, but not as intended for a progress bar:

svg circle {
  animation: dash 3s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <circle stroke="#000000" pathLength="215" stroke-width="7" fill="transparent" stroke-dasharray="6 6" r="57" cx="60" cy="60"/>
    </svg>

Visit the CodePen link here for reference.

Your assistance in resolving this issue would be highly appreciated.

javascriptjquerycssanimationsvg

Answer №1

Exploring two unique implementations of the same animation concept. The first example may be considered "hacky" as it involves hard-coding the dasharray with specific dots, spaces, and a long subsequent space.

In contrast, the second example utilizes a mask to create the appearance of smaller dashes within the animated circle/dasharray.

This showcases two distinct ways to represent the animation effect, offering different visual expressions.

svg circle#c1 {
  animation: dash1 3s linear forwards;
}

@keyframes dash1 {
  from {
    stroke-dashoffset: 36;
  }
  to {
    stroke-dashoffset: 0;
  }
}

svg circle#c2 {
  animation: dash2 3s linear forwards;
}

@keyframes dash2 {
  from {
    stroke-dasharray: 0 36;
  }
  to {
    stroke-dasharray: 36 36;
  }
}
<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle id="c1" stroke="#000000" pathLength="36" stroke-width="7" fill="transparent"
  stroke-dasharray="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 36"
  r="57" cx="60" cy="60" transform="rotate(-90 60 60)" />
</svg>

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <circle stroke="white" pathLength="36" stroke-width="7" fill="transparent"
      stroke-dasharray="1 1" r="57" cx="60" cy="60" />
    </mask>
  </defs>
  <circle id="c2" mask="url(#m1)" stroke="#000000" pathLength="36" stroke-width="7"
  fill="transparent" stroke-dasharray="18 36" r="57" cx="60" cy="60"
  transform="rotate(-90 60 60)" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?

While dynamically importing a javascript file that exports multiple functions (without a default export), I encountered this issue: const sayHi = import('./sayHi.js') I was expecting the type of sayHi to be Promise<{name1: function, name2: fu ...

javascriptreactjstypescriptes6-promisees6-modules

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I trigger a PHP function by clicking a button on a PHP page that has already been loaded?

While I've come across a variety of examples, I haven't been able to make them work for the simple task I need to accomplish. The code in these examples seems overly complex compared to what I require. In essence, I have a form that processes dat ...

javascriptphp

The functionality of Breeze.js for saving changes fails unless the designated controller method is explicitly named as `SaveChanges()`

Hello, I am a beginner in BreezeJs I have a post method on my Controller // POST api/company/post [Authorize(Roles = "Admin")] [AcceptVerbs("POST")] [HttpPost] public object **SaveChanges**(JObject companyRequest) ...

c#jqueryasp.net-mvcentity-frameworkbreeze

Dealing with React Native text overflowing beyond the screen width when using FlexWrap

I'm currently working on implementing a component in react native that consists of a row containing and components, but I'm struggling to achieve the desired outcome. Here's my current code: <View style={{ flexDirection: ...

javascriptreactjsreact-nativeflexbox

Running JavaScript function from AJAX response containing both HTML and JavaScript code

For my first time using AJAX to prevent page refresh upon form submission, everything works flawlessly. The data is received in HTML form and placed into the designated div. However, I am encountering an issue with one of the JavaScript functions responsib ...

javascriptphpjqueryajax

Chrome Extension to Emphasize Every Word

As a novice, I am embarking on the journey of creating my own chrome extension. The idea is to design a popup.html file that showcases a "highlight" button. The functionality would involve clicking this button to highlight all words on the page. Here&apos ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Measure the loading times of external web pages using JavaScript

I am seeking a minimalist approach to create a webpage on my server that utilizes JavaScript to calculate the loading time of the login page on various remote URLs/servers. These servers are dispersed globally, and my aim is to determine the quickest one f ...

javascriptjqueryajax

Exploring jasmine-node: unraveling the mysteries of errors

As I embark on my journey to learn JavaScript, I decided to tackle some exercises on exercism.io. This platform provides pre-written tests that need to be passed. While things were going smoothly initially, I hit a roadblock with the latest exercise where ...

javascriptjasmine-node

Adding extra fields to an existing JSON response in a TypeScript REST API

I am in need of an additional column to be added to my response data. Currently, I am fetching data from multiple REST endpoints one by one and merging the results into a single JSON format to display them in an Angular Mat table. The columns that I want t ...

javascriptnode.jsangulartypescript

Ways to have a div show up and stay in place as you scroll down?

How can I make the div "full" sticky after scrolling down 200px, and revert to display none when scrolling back up? Is there a way to accomplish this using JavaScript? In the code snippet below, you will find three divs: header, header2, and header3. The ...

javascriptjquery

Fetching user feeds from Facebook with AngularJS is easier than you think

I have searched through multiple articles but have yet to find a solution for this particular issue. My goal is to retrieve user feeds from Facebook. How can I achieve this? Below is my code: var newMod = angular.module('newapp', []); newMod.c ...

javascriptangularjsfacebookfacebook-graph-apifacebook-javascript-sdk

When making a Get Request from Angular, the header fails to appear for servicing

I am currently working on an angular JS application where I need to call a GET API that is OAuth 2.0 enabled, requiring a Bearer Token in the header for authentication. The method I am using to make the HTTP request is as follows: var config = { heade ...

javascriptangularjshttp-headersauthorization

obtain an inner element within a container using the class name in a div

I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...

javascripthtml

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

I am currently working on a web development project that aims to allow users to edit webpages without needing any coding knowledge. Users with authorization will be able to modify not only the text but also various HTML tags on the page, similar to platfor ...

javascriptjavahtml

Attempting to transmit JavaScript information to my NodeJS server

Having some trouble sending geolocation data to NodeJS through a POST request. When I check the console log in my NodeJS code, it's just showing an empty object. I've already tested it with postman and had no issues receiving the data. The probl ...

javascriptnode.jsexpress

Modify the values of all cells within a specific column in a table by utilizing a 2D array for both rows and cells

https://codesandbox.io/s/1p770371j The demonstration above showcases a table where data can be modified in each cell, and the 2D array keeps track of which row and column the data changes occur. A new button has been added to the column header titles. Th ...

javascriptarraysreactjsmaterial-ui

Using jQuery to create dynamic CSS effects directly on the drop-down menu button

Seeking your kind assistance once again... I am attempting to design a navigation bar that displays the dropdown section upon hovering over the buttons AND shows a bottom border on the button that was last hovered over My code functions properly when I ...

htmljquerycss

After making a POST request, I must ensure that the page is rendered accordingly

How can I efficiently handle requests to the server and update the page without reloading it, following SPA principles using useEffect()? I attempted to implement something like this: useEffect (() => { addProduct (); }) but it proved to be ineffectiv ...

javascriptnode.jsreactjs

Listeners for JavaScript actions

My typical approach to implementing a select box is as follows: <select size="1" name="example_length" onchange="callSomeMethod"> <option value="10" selected="selected"></option> <option value="25">25</option> < ...

javascriptjquerydatatablesdom-eventsmootools