Distribute progress bar evenly around a circular path

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.

reactjscssprogress-barreact-bootstrap

Answer №1

My Strategy:

  • I implemented a lot of translation and rotation
  • Utilized the transform-origin property to move progressbars away from the center point
  • Added a background color for the center circle to prevent progressbar 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>

Link to jsFiddle

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

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss

MySQL unable to access information entered into form

After creating a new log in / register template using CSS3 and HTML, I now have a more visually appealing form compared to the basic one I had before. To achieve this look, I referenced the following tutorial: http://www.script-tutorials.com/css 3-modal-po ...

phpmysqlcssxhtml

How do you display a nested object in React after merging it?

To display the JSON below as an image, click https://i.stack.imgur.com/tixu4.png let finalSplit = [ { start: "73", end: "76", splits: [ { word: "Now", start: "73", ...

javascriptarraysreactjsconcatenationjsx

Converting a React Stateless Component to vanilla JavaScript

Someone explained to me that the following react stateless component: ({value}) => <li>{value}</li> morphs into (props) => { var value = props.value; return <li>{value}</li> }. I'm struggling to grasp this transformat ...

reactjs

CSS tilt effect in Internet Explorer versions 7 and 8

How can I make my rhombus styled menu work in IE 7 & 8? It's currently functioning fine in Chrome, Firefox, and IE9. Any suggestions or solutions would be greatly appreciated! http://jsfiddle.net/C7e7U/ Thank you in advance. Here is the HTML co ...

htmlinternet-explorercss

Components will be displayed without any gaps on smaller screens

I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows: <div> <CustomPageHeader pageTitle={t('offersPage.pageHeader')} ...

cssreactjsmaterial-ui

Resolving issues with Typescript declarations for React Component

Currently utilizing React 16.4.1 and Typescript 2.9.2, I am attempting to use the reaptcha library from here. The library is imported like so: import * as Reaptcha from 'reaptcha'; Since there are no type definitions provided, building results ...

reactjstypescript

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

phpcsshtmlpixel

The failure of the meteor reactiveVar to update is causing discrepancies in the displayed

I am currently developing a meteor application and making use of the reactivity feature to enable automatic updates of results on the DOM when they are available or upon update. Below is a snippet of my code: Template.message.helpers profession: ...

reactjsmeteor

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

cssreactjsionic-frameworkshadow-dom

How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

I am puzzled why the code below renders correctly without any issues until I add a doctype declaration: <body style="margin:0; padding:0; background-color:#eeeeee"></body> <div id="HeaderContainer" style="background-color:#eeeeee; color:Bl ...

htmlcss

Drop-down and autocomplete feature in Material UI design framework

Encountering an issue with aligning a label with a dropdown in material UI, and for some reason, this behavior is observed: Struggling to get them aligned on the same row. This is the code snippet of my component: const useStyles = makeStyles(theme => ...

cssreactjsmaterial-ui

The styles from the npm package are not being properly applied to the class

After creating my react npm package using webpack, I encountered an issue where the styles from the package were not being applied to classes when installed in my react project. I used style-loader in my webpack configuration, but kept getting errors sayin ...

javascriptreactjsnext.jswebpack-4

Utilizing Redux state within _app.tsx in NextJS: A comprehensive guide

This snippet of code pertains to my _app.tsx file import '../styles/globals.css' import AppNav from '../components/AppNav' import type { AppProps } from 'next/app' import { store } from '../store' import { Provider } ...

javascriptreactjsreduxreact-reduxnext.js

The specified location "/login" did not match any routes with react router dom v6

I have been working on organizing routes in `react-router-dom v6. My current flow looks like this: root AppComponent function AppComponent() { return <AppRoute />; } AppRoute.js (base routes) const AppRoute = () => { return ( <> ...

reactjsreact-router-dom

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so. I initially looked into using Intersection Observer based on a popular answer found here: ...

javascripthtmlcssscroll

Having trouble understanding how to create a continuous loop for a CSS animation within the KreatureMedia Layerslider

Currently, I am using KreatureMedias Layerslider and trying to make a fullwidth wave bob up and down. This is what I have at the moment... <img class="ls-layer" data-ls="durationin:1500;scalein:1.1;offsetxin:-50;loopcount:-1;loopoffsetx:0sw;loopoffset ...

jqueryhtmlcssanimationplugins

Error: The function setIsEnabled does not exist

Currently, I am in the process of merging two separate next.js projects to create a website that can utilize the Cardano wallet 'Nami'. The code for accessing the wallet functions correctly in its original project, but when transferred over, it p ...

javascriptreactjstypescriptnext.js

Ultimate guide to streamlining LinkedIn posts with Next.js and the LinkedIn API

Looking to automate posts on my LinkedIn page using Next.js for my web application. I've already set up a LinkedIn app with the Client ID and Client Secret. However, after researching various resources, none seem to address my specific requirement. h ...

reactjsnext.jslinkedin-api

Style selector for dynamic drop-down menus

import React, { Component } from "react"; export default class FontChanger extends Component{ constructor(props){ super(props); this.state ={ selectedFont: "", currentFont: "", }; this.handleFon ...

javascripthtmlcssinline