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.
This is my progress so far:
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",
})}
/>
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>Calling an ActionCreator from another file is proving to be a challenge... The products.ts file contains the ActionCreators and Reducers for Products... import { setStock } from './Store.ts'; //.... export const addProduct = (product: IProduct) ...
I am trying to target a specific class applied to an <AccordionSummary> component that contains a <CustomTextField> component within its expandIcon property. https://i.stack.imgur.com/PEo4c.png My attempt so far: <AccordionSummary sx={{ ...
I've been experimenting with creating a calendar using javascript, HTML, and CSS on my own. I managed to achieve some functionality like obtaining the current month and year as well as the previous month and year by clicking a button in HTML. However, ...
In my design, I have a div that overlays another div with the exact same offsets and font properties. The upper div has a transparent background and typically covers the text of the underlying div. However, I recently noticed an issue with my script where ...
Currently, I have a text input that is centered horizontally when typing text. However, I want it to be positioned at the top instead. See the following code: height: 143px; width: 782px; font-family: 'Roboto Mono'; background: #FFFFFF; border ...
For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...
For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...
Unfortunately, I've hit a roadblock with this seemingly simple question and can't seem to find the answer. I'm having trouble accessing environment variables in a specific file. I am using create-react-app (^16.11.0) The .env file is loca ...
Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...
Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...
Hey there, I’ve been tasked with updating an old React-Native iOS project from version 0.25.1 to 0.48.0. However, I’m encountering several compiler issues and struggling to navigate through the code updates. The project includes an index.ios.js file s ...
I am aiming for the DIV height to automatically adjust to the text within it, while also maintaining a minimum height. However, when the user hovers their mouse over the DIV, I want the height to change smoothly without losing the transition effect. When ...
I have implemented the following HTML structure: <div style="height:200px;overflow-y:scroll;"> <table>.....</table> </div> By using this setup, I am aiming to replicate the functionality of an expanded <select> control wit ...
I am currently working on designing a form using Bootstrap, and I have a specific requirement where the first name and last name fields need to be displayed inline while the rest of the form remains unchanged. Although I have managed to make the inline fu ...
While creating a simple react weather app, I encountered an issue. The app was functioning perfectly until I added a material-ui button. Now, the app only works when I press enter and not when I click on the button. It seems that the material-ui code const ...
I encountered an issue when attempting to run npx create-react-app my-app. Below are the details, E:\>npx create-react-app myapp npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/create-react-app ...
I'm currently working on my personal website using HTML and CSS with textedit. I've successfully created functional links for the main navigation menu headings, but I'm encountering issues with the dropdown options. Whenever I try to click o ...
I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...
I've spent a lot of time scouring the internet for a solution to my problem, but it seems like maybe I'm not asking in the right way. My project involves creating a Node-Express website where ReactJS is only needed on specific pages, while the r ...
How can I use useEffect to list users from the database and then create a condition that checks if the user entered in a textfield exists or not? Even though I store API values in the user state, when I enter a valid user in the textfield, it always shows ...