I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input.
@-webkit-keyframes donut-chart-1 {
to {
stroke-dashoffset: 100;
}
}
@keyframes donut-chart-1 {
to {
stroke-dashoffset: 100;
}
}
Unfortunately, I have not been able to achieve this using ng-class or ng-style. Any suggestions?
Here is a fiddle where the code can be found: donut chart
Thank you in advance! Fabio
(Adjust values to suit your needs)
.donut-chart-1. The required value is ceil((radius of your circle)*2*Pi).donut-chart-1 {
stroke-dasharray: 440; /* circumference of your circle */
stroke-dashoffset: 440; /* specify the offset for a starting gap, not the dash*/
}
donut-chart-1 and set the value for stroke-dashoffset to initiate the animation. The targeted value is (your initial value) - (your initial value) * %44 and 75% 110.@keyframes donut-chart-1 {
to {
stroke-dashoffset: 110; /* animates 75% */
}
}
.circle element within .donut-chart-1 with the previously defined animation:.donut-chart-1 .circle {
animation: donut-chart-1 1s ease-out forwards;
}
You may not want to manually adjust these values, so utilize the following JavaScript code to calculate the path length of your SVG element and set the values accordingly:
var path = document.querySelector('circle');
var length = path.getTotalLength();
Complete snippet:
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.donut-chart-1 {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.donut-chart-1 .circle {
-webkit-animation: donut-chart-1 1s ease-out forwards;
animation: donut-chart-1 1s ease-out forwards;
}
@keyframes donut-chart-1 {
to {
stroke-dashoffset: 110;
}
}<div class="item donut-chart-1">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle" r="70.14149" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>I am attempting to display a set of transform controls in such a way that they are constantly visible to the user. However, when I disable DepthWrite or apply the AlwaysDepth function to the transform controls, I achieve the desired result but encounter an ...
I need assistance with auto-formatting the postal code entered by the user. The rule for the postal code is to use the format A0A 0A0 or 12345. If the user inputs a code like L9V0C7, it should automatically reformat to L9V 0C7. However, if the postal code ...
I have a React-Typescript app with backend calls using React Saga. I'm facing an issue where when one of my frontend functions makes a backend call, the next function starts executing before the previous one finishes. Currently, I'm using the SE ...
I am facing an issue with my JSON array and Ajax code. Here is the snippet of my code where I upload an Excel file, convert it to JSON, then save it as a string in my database: function exportExcelToTable() { $('#upload-excel-convert').chang ...
I'm encountering an issue with a webpage element that has a hide/show animation. Despite the initial state being hidden, when the page loads, it still displays the hide animation. I attempted to set ng-show="false", but the hide animation persists upo ...
I encountered an issue when attempting to post to the DB, receiving an Error: 'Cannot POST /api/postCampaign' and a 404 (Not Found) error for . My goal is to store data in a MongoDB database. Initially, this code was functioning properly as it co ...
I'm currently working on implementing a search feature for a web application. While I have made some progress, I am facing an issue with removing items when the user backspaces so that the displayed items match the current search query or if the searc ...
Currently, I am in the process of developing a Hybrid mobile app with ionicframework, angularjs, and cordova. In my app, I will require data storage for all user details. One major aspect I am trying to resolve is how to update the database for all users. ...
Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...
I am trying to extract specific data from an object created using the json_encode function in PHP. while($locations=$req->fetch()){ $t = $locations->titre; $la = $locations->latitude; $lo = $locations->longitude; $typ = $lo ...
I am currently working on a Map Method but facing an issue. The data 1,2,3,4,5 is successfully displayed in the console.log, but not showing on the website. import React from 'react' export default function secretStashScreen() { const numbers = ...
Seeking advice on implementing tab functionality for a page with multiple jquery EditInPlace fields. The goal is to allow users to navigate between fields by pressing the tab key. Currently using the 'jquery-in-place-editor' plugin available at: ...
Recently, I set up a brand new Next.js project using npx create-next-app@latest --typescript. Upon completing the installation (version 13.3.4), without making any modifications to existing files, I introduced a new file named middleware.ts within the src ...
If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it: The example shown above is ...
I am currently learning ReactJS and focusing on implementing pagination. My goal is to fetch page data from a server using an API, with Loopback being the tool for API integration. The initial setup involves displaying a list of 10 entries on the first pag ...
This piece of code contains a script that creates a new div element with a class, adds content to it using PHP shortcode, and appends it to an Instagram section. Check out the image here <script> let myDiv = document.createElement("div"); ...
I'm having trouble with the outline buttons class (btn btn-outline-primary) in Bootstrap. For some reason, all the buttons appear gray instead of colored as they should. Here's an example of how the buttons should look: https://ibb.co/ChKf83y, bu ...
Good day everyone, I am encountering a problem while deploying a mobile application to Windows Phone 8. The app is a hybrid application developed with Worklight 6.1.0.1, deployed to windows8phone, android, and iphone platforms. It's an Angular ...
Working with Node.js, I have written a code that produces the following output: entries: [ { data: [Object] }, { data: [Object] }, { data: [Object] }, ... { data: [Object] } ] } null The code snippet is as follows: targetingIdea ...
Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...