How can an SVG circular progress bar be created using stroke dasharray?

Can anyone help me with adding dashes between the line in this progress bar I'm trying to recreate? Any suggestions would be greatly appreciated.

https://i.sstatic.net/KdwtzYGy.png

This is my progress so far:

https://i.sstatic.net/3KTjic5l.png

I have been using the react-move library to animate the clock

<CircularProgressbar
  value={value}
  text={`${roundedValue}%`}
  circleRatio={0.75}
  styles={buildStyles({
    rotation: 1 / 2 + 1 / 8,
    strokeLinecap: "butt",
    trailColor: "#eee",
  })}
/>
cssreactjssvgsvg-animatestroke-dasharray

Answer №1

To create dynamic animations, you can use circles with the stroke-dasharray property along with a mask to control the visual effects.

document.forms.form01.meter.addEventListener('change', e => {
  document.querySelector('#m3 circle')
    .setAttribute('stroke-dasharray', `${parseInt(e.target.value) + 1} 120`);
  document.querySelector('#gauge')
    .setAttribute('transform', `rotate(${parseInt(e.target.value) * 3})`);
  document.querySelector('#text').innerHTML = `${e.target.value}%`;
});
body {
  background-color: #191919;
  display: flex;
}
<form name="form01">
  <input type="range" name="meter" min="0" max="90" value="15" step="1">
</form>
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100">
  <defs>
  <filter id="blur1">
    <feGaussianBlur stdDeviation=".2" />
  </filter>
  <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation=".6" flood-color="#4ebcc4" />
    </filter>
    <mask id="m1">
      <circle r="40" stroke="white" stroke-width="50"
        fill="none" stroke-dasharray="91 30" pathLength="120" />
    </mask>
    <mask id="m3">
      <circle r="40" stroke="white" stroke-width="30"
        fill="none" stroke-dasharray="15 120" pathLength="120" />
    </mask>
    <mask id="m2">
      <circle r="14" stroke="white" stroke-width="6"
        fill="none" pathLength="120" />
     <circle r="14" transform="scale(.9) translate(2 0)" stroke="black" stroke-width="6"
       fill="none" pathLength="120" />
    </mask>
  </defs>
  <g transform="translate(50 50) rotate(135)"  mask="url(#m1)" filter="url(#blur1)">
    <circle r="46" stroke="#4ebcc4" stroke-width="1.5"
      fill="none" stroke-dasharray=".6 14.4" pathLength="120" />
    <circle r="40" stroke="#005a96" stroke-width="7"
      fill="none" stroke-dasharray="1 1" pathLength="120" />
      
    <circle r="40" stroke="#235e6b" stroke-width="7" mask="url(#m3)"
      fill="none" stroke-dasharray="1 1" pathLength="120" />
      
    <circle r="33" stroke="#4ebcc4" stroke-width="2"
      fill="none" pathLength="120" />
    <circle r="30" stroke="#4ebcc4" stroke-width="5"
      fill="none" stroke-dasharray=".5 14.6" pathLength="120" />
    <circle r="14" mask="url(#m2)" stroke="#4ebcc4" stroke-width="6"
     fill="none" pathLength="120" />
  </g>
  <g transform="translate(50 50)" filter="url(#blur1)">
    <circle r="24" stroke="#4ebcc4" stroke-width="3"
      fill="none" stroke-dasharray=".1 2.9" pathLength="120" />
    <text id="text" font-size="10" font-family="sans-serif"
      fill="#4ebcc4" stroke="none" text-anchor="middle"
      dominant-baseline="middle" filter="url(#shadow2)">15%</text>
    <g id="gauge" transform="rotate(45)">
      <path transform="rotate(-135) translate(0 -15)"
        d="M -2.5 0 A 1 1 0 0 0 2.5 0 L 0 -6 L -2.5 0" fill="#4ebcc4" />
    </g>
  </g>
</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

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

javascriptjqueryhtmlcss

Switching a material-ui input control instead of a textfield for materials-ui-datepicker: the ultimate guide

Within my React application (v16.3), I am utilizing the DatePicker component from the material-ui-pickers library to render date-picker controls. This particular component renders a Material-UI TextField. However, I am interested in modifying it to only di ...

javascriptreactjstypescriptmaterial-uireact-tsx

Guide to aligning 2 divs side by side using bootstrap

I have been experimenting with different methods like col-xs-6 for the first child, but I can't seem to get it right. How can I achieve this layout using only Bootstrap? Despite trying col-xs-6, I still haven't been able to place these divs next ...

cssbootstrap-5

Encountering an error while attempting to read the 'displayName' property in a Cypress component test due to its undefined nature

Currently, I have a functional Next.js application and my goal is to introduce Cypress component tests for my React components. While end-to-end Cypress tests are running smoothly, I'm encountering an error when trying to implement component tests. T ...

reactjsnext.jscypresscypress-component-test-runner

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Description: I'm currently developing a tic-tac-toe game, and I've run into an interesting issue. When I click on any box for the first time, the "X" symbol doesn't show up. However, it works fine after the initial click. Problem Details: ...

javascripthtmlcssgame-development

Responsive navigation menu featuring dynamic dropdown menus using HTML and CSS

Looking to design a responsive HTML and CSS navigation menu with multiple dropdown menus? You're in the right place. I've scoured countless YouTube videos, but haven't quite found the perfect template for a two-part navigation menu that tic ...

htmlcssheadernavigationresponsive

Uncovering components generated by React JS with BeautifulSoup

My goal is to extract anchor links with the class "_1UoZlX" from the search results on a specific page - After analyzing the page, I realized that the search results are dynamically generated by React JS and not readily available in the page source or HTM ...

javascriptpythonseleniumreactjsbeautifulsoup

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

Utilizing React hooks to dynamically toggle a class within a component

While similar questions have been raised previously, none seem to address my specific issue. Most references involve class components that do not align exactly with what I am attempting to achieve. My goal is to toggle two components on and off with a simp ...

javascriptreactjsreact-hookstoggle

Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar. I am currently working on an angular application using the Ionic framework for testing purpos ...

htmlcssangularjsionic-framework

`How can I integrate jQuery UI using Webpack in my project?`

I recently initiated a fresh project utilizing React Slingshot and am experimenting with integrating jQuery UI accordions. I've included the jQuery UI plugin using NPM with the command npm install --save jquery-ui. From what I comprehend, Webpack auto ...

javascriptjquery-uireactjsnpmwebpack

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

jquerycss

The hook call is invalid - make sure to only use hooks inside the body of a function component when trying to style a class-based component using material-ui

I have recently started learning reactjs with material-ui, but I encountered an error while applying styles to my component. Here's my code: const useStyles = makeStyles(theme => ({ root: { flexGrow: 1, }, menuButton: { ...

reactjsmaterial-ui

What is the recommended approach for utilizing props versus global state within your components when working with JS Frameworks such as Vue?

Currently, I am delving into a larger project using Vue and I find myself contemplating the best practices when it comes to utilizing props versus global Vuex states for accessing data within a component. To elaborate, let's say I have a component re ...

javascriptreactjsvue.jsstatevuex

The onClick event handler fails to trigger in React

Original Source: https://gist.github.com/Schachte/a95efbf7be0c4524d1e9ac2d7e12161c An onClick event is attached to a button. It used to work with an old modal but now, with a new modal, it does not trigger. The problematic line seems to be: <button cla ...

javascriptreactjs

Having trouble triggering drag events efficiently with d3-drag on SVG elements

drawAll refers to a two-dimensional array where each drawAll[i] element represents a drawing containing all the strokes. A stroke is essentially a string representing a series of 2D points that can be utilized to generate a <path>. I am currently at ...

javascripthtmld3.jssvgdrag-and-drop

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate

Error message: "The source and destination cannot be identical in the AWS Amplify React JS Next application."

I am facing an issue while attempting to deploy my Reactjs Next Application on AWS Amplify as it displays an error during the build process. Here is a snippet of my amplify.yml configuration for pre-build and build: version: 1 frontend: phases: preB ...

reactjsnext.jsaws-amplify

Tips for altering value by selecting radio buttons

Currently, I am in the process of developing a website using Adobe Dreamweaver with php. The site includes three buttons that serve as payment method options and act as continue buttons. My goal is to have the selected radio button (I agree button) add a s ...

phpjqueryhtmlcss

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4