Looking to create a unique horizontal progress bar with a circle at the end using react js, similar to the image provided. Successfully implemented a custom "%" progress bar and now aiming to incorporate a circle with text inside at the end.
https://i.sstatic.net/9Nf97.png
To view the code for the current progress bar with custom "%": codesandbox
Update the progress bar component to:
<div style={containerStyles}>
<div style={fillerStyles}>
<div style={circleStyles}>{circleText}</div>
</div>
</div>
Include these styles in the component:
const circleStyles = {
display: "flex",
position: "absolute",
right: "0",
width: "50px",
height: "50px",
background: "blue",
top: "-60%",
borderRadius: "50px",
justifyContent: "center",
alignItems: "center",
color: "white"
};
Here is the App.js:
export default function App() {
return (
<div className="App">
<ProgressBar
bgcolor={item.bgcolor}
completed={item.completed}
circleText={"100%"}
/>
</div>
);
}
https://codesandbox.io/s/objective-cherry-2ytzm?fontsize=14&hidenavigation=1&theme=dark
Insert a span element inside the container div and apply the following style to it:
<div style={containerStyles}>
<div style={fillerStyles}></div>
<span style={circleStyle}>{text}</span>
</div>
Here is the style for the circle element:
const circleStyle = {
height: 40,
width: 40,
position: "absolute",
right: 0,
backgroundColor: bgcolor,
borderRadius: "50%",
top: -10,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white"
};
Lastly, add the following to the container's style:
position: "relative",
I am new to creating Chrome extensions and I am attempting to build one that will display the IDs of all elements with a specific class name on a website in the popup window. I would like to know if there is a better way to tackle this issue. Thank you for ...
Is there a way to specify a mouse click event for an element with a decoration applied to the text, matched with regex? The option to specify a hoverMessage is available, but I would like to find a way to execute a function based on which decorated text ...
I created an algorithm to compare if two trees have the same leaves. Both trees display matching leaf numbers in the exact order, resulting in a true outcome. Below is the code that I formulated: function leafSimilar(root1: TreeNode | null, root2: TreeNo ...
Utilizing Material-ui's Tabs, which are controlled, I am implementing them for (React-router) Links in the following manner: <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/> <Tab value={1} label="users ...
Utilizing chart.js and ng2-charts, I am developing gauge charts for my platform to monitor the fluid levels inside a machine's tank. The values are retrieved from an external API, but I am encountering an issue where the charts are rendered before I ...
Currently tackling a project using Next JS, I've hit a roadblock with React. Here's a simplified version of the code snippet that's giving me trouble. Attempted to reproduce it on codesandbox but couldn't quite nail it down just yet. Wi ...
I am experiencing difficulties in retrieving a variable from a getJSON() request. The issue lies within the following three functions: function getPcLatitude() { // onchange var funcid = "get_postcode_latitude"; var postcode = parseInt($('#i ...
As I am working on developing an app using node.js and express, I encountered an error while making post requests in Postman. Cannot POST /api/auth/login%0A Below are the details of my app's structure along with the files involved: app.js const ex ...
In my React application, I used the Material-UI List component to display images with varying dimensions and limited to a max-width of 25%. Upon loading the page, I call scrollTo({top: some-list-top-value}) on the list to position it at a specific point. ...
Running nextjs 13.5.3 and implementing an API route handler under /app This route handler mainly fetches data from a CMS and then returns the response. The IDs on the client side are hashed, so one of the functions is to unhash the IDs from a request and ...
My data consists of an array of objects: let allData = [ {title:"Adams",age:24,gender:"male"}, {title:"Baker",age:24,gender:"female"}, {title:"Clark",age:23,gender:"male"}, {title:"Da ...
export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...
My query pertains to utilizing an express application object (app object) as a callback function. The express application is known for its methods and properties that aid in handling HTTP requests. When integrating the app object with an HTTP server, it se ...
In my MongoDB query, I am attempting to use the aggregate function to fetch data from one collection while limiting the amount of data retrieved from another collection. Here is the code snippet that I have come up with: getFamilyStats: function (req, res ...
My concern: I am facing an issue where the console.log('tableNobject: ', tableNobject) does not get logged in my knex migration script. I have attempted the following code snippets: //solution A export async function up(knex: Knex) { const ta ...
I'm currently working on a project that requires the use of charts, so I decided to utilize chartsjs. However, I am encountering a small issue that has two components. https://i.stack.imgur.com/00Of0.gif Upon initial page load, my data is not displ ...
When it comes to Django and file locations, I often find myself getting confused a lot, especially since I am using Django 1.10. Currently, in my static/(django-proj-name)/js/ folder, I have my main.js file where I need to call a Python script along with t ...
Similar Question: Custom cursor interaction point - CSS / JQuery I've been experimenting with changing the image of the mouse pointer by using the CSS cursor property ("cursor: url(images/target.png), crosshair;") and have observed that when a us ...
Recently, I encountered CORS errors while polling the weather every 30 seconds in my program. Upon investigating, I discovered that the city and country were being interpreted as undefined. To fetch user data from my users' table, I utilize an Axios ...
Need help setting the width of a select tag <div class="input-group"> <select class="form-select" style="width: 50%;"> <option selected value="dummy">Dummy</option> <opt ...