I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar.
<ProgressBar now={40} />
What strategies can I implement to ensure proper alignment of the 12 progress bars around the central circle? The number of progress bars is fixed at 12.
My Strategy:
transform-origin property to move progressbars away from the center pointprogressbar ends from showing through.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(15deg);
}
.average {
border-radius: 50%;
width: 75px;
height: 75px;
border: 2px solid green;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%) rotate(-15deg);
top: 50%;
left: 50%;
position: absolute;
background-color: #fff;
}
.average span:first-child {
border-bottom: 1px solid;
margin-bottom: 1px;
}
progress {
transform: translateY(-50%);
top: 50%;
left: calc(50% + 29px);
position: absolute;
transform-origin: -29px center;
padding: 10px;
max-width: 90px;
}
progress:nth-child(1) {
transform: translateY(-50%) rotate(360deg);
}
progress:nth-child(2) {
transform: translateY(-50%) rotate(330deg);
}
progress:nth-child(3) {
transform: translateY(-50%) rotate(300deg);
}
progress:nth-child(4) {
transform: translateY(-50%) rotate(270deg);
}
progress:nth-child(5) {
transform: translateY(-50%) rotate(240deg);
}
progress:nth-child(6) {
transform: translateY(-50%) rotate(210deg);
}
progress:nth-child(7) {
transform: translateY(-50%) rotate(180deg);
}
progress:nth-child(8) {
transform: translateY(-50%) rotate(150deg);
}
progress:nth-child(9) {
transform: translateY(-50%) rotate(120deg);
}
progress:nth-child(10) {
transform: translateY(-50%) rotate(90deg);
}
progress:nth-child(11) {
transform: translateY(-50%) rotate(60deg);
}
progress:nth-child(12) {
transform: translateY(-50%) rotate(30deg);
}<div class="container">
<progress max="100" value="40"> 40% </progress>
<progress max="100" value="75"> 75% </progress>
<progress max="100" value="17"> 17% </progress>
<progress max="100" value="27"> 27% </progress>
<progress max="100" value="44"> 44% </progress>
<progress max="100" value="31"> 31% </progress>
<progress max="100" value="40"> 40% </progress>
<progress max="100" value="75"> 75% </progress>
<progress max="100" value="17"> 17% </progress>
<progress max="100" value="27"> 27% </progress>
<progress max="100" value="44"> 44% </progress>
<progress max="100" value="31"> 31% </progress>
<div class="average">
<span>4.9</span>
<span>10</span>
</div>
</div>I am looking to alter the background-image of this particular image when transitioning to another one from my images folder, similar to this example. Below is the code that I have: CSS .image { position: relative; overflow: hidden; -webkit-tr ...
I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...
Looking to customize the style of a specific Material component like ListItemText? Try using the theme variable for a consistent solution across all components in your app. const theme = createMuiTheme({ overrides: { ListItemText: { ...
I'm facing an issue where I have a table cell with a button inside it. When I try to float this button, it not only moves horizontally but also changes its vertical position, shifting to the top of the line. For example: <table style="width: 100% ...
I'm working with 2 divs that are floating side by side. The left div contains a part number, which is only one line. The right div holds the product description, which can span multiple lines. I am looking for a way to vertically align the text in t ...
I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...
After attempting to search on Google, I am struggling to find the right keywords. I'm trying to apply a pseudo-selector only to a specific class. In this scenario, if we remove the specified class, the last Hi should appear in blue. However, my expe ...
I am currently trying to integrate Redux into an existing Next.js project, but I am struggling to grasp how the store functions server-side. I came across this example that I am following: https://github.com/vercel/next.js/blob/canary/examples/with-redux ...
i am looking to create a component similar to this https://i.sstatic.net/fwIB0.png currently, I am utilizing a material UI pop menu in my project below is the JSX code snippet <div className="navMenu" style={{ position: "relative" ...
Hey there, I'm currently utilizing react in combination with MUI. To display notifications, I've integrated a library called notistack. My goal is to show an error message in a dialog if there's a failure in the API response. Here's the ...
I'm having trouble layering one image on top of another in my code. Here is my code: body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; } .neer { z-index: 100; position: absolute; } ...
We are currently utilizing material-ui version 1 and composing Higher Order Components (HOC) with the recompose utility. Our issue arises from having two separate styles objects - one defined within the component itself, and another general style object th ...
Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...
I am currently using the new React.createRef() api in one of my components. I am trying to figure out how to test if document.activeElement is equal to the current ref component. Here is the component code: export class Automatic extends Component { c ...
My table has 4 columns with different widths: column 1: fixed width of 500px; column 2: calc(33% - 165px); column 3: calc(33% - 165px); column 4: calc(33% - 165px); Despite having the same value for the last 3 columns, their actual widths are different. ...
I am currently facing some challenges with my code and could use some assistance. It appears that the error alert box is displaying even though it should be empty. I conducted some code "tests" to analyze the situation and displayed the results on this pa ...
When navigating through the shopping cart, users will encounter a product category tree structured as follows: Category1 Subcategory11 Subcategory12 ... Category2 Subcategory21 Subcategory22 ... Category3 Subcategory31 Subcategory32 ... ...
I have a pop-out div at the top of my page that expands and closes on toggle. Also, when I toggle the pop-out div, it changes the top position of another div (a side pop-out menu). The issue is that the side pop-out menu should only appear when clicking ...
Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...
I'm currently facing a challenge with my project regarding the utilization of flexbox. Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from hap ...