How to start progress bar from bottom in react-circular-progressbar?

Question

I'm using react-circular-progressbar in my React JS Project. I want to make the completed bar start from the bottom and move in both sides equally. Also, the area covered within this circular-bar should have some background(sky-blue). I've tried to add

transform: rotate(270deg);

but this doesn't seem to be working. Here is the complete code for the component:

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
import "react-circular-progressbar/dist/styles.css";
    
    function Circular_progress_bar() {
      const percentage = 10;
    
      return (
        <div>
          <CircularProgressbar
            value={percentage}
            text={`${percentage}%`}
            background
            backgroundPadding={0}
            styles={{
              background: {
                fill: "#102558"
              },
              path: {
                stroke: "#00ade9",
              },
              trail: {
                stroke: "transparent",
                transform: "rotate(90deg)",
                transformOrigin: "center center",
                rotation: 1 / 7 + 1 / 10,
              },
              text: {
                // Text color
                fill: "white",
                // Text size
                fontSize: "3rem",
                fontWeight: "bold",
              }
            }}
          />
        </div>
      );
    }

export default Circular_progress_bar;

Note: I'm not using buildStyles object here as it wasn't allowing to change font-weight of the text. Here is the codesandbox example: https://codesandbox.io/s/circular-progressbar-demo-1-s8enfw

Answer 1

You can calculate rotate deg by percentage value

function Circular_progress_bar() {
    const percentage = 60;
    const rotateDeg = 180 - (percentage * 3.6) / 2;
    return (
        <div
            style={{
                position: 'relative',
                width: 400,
                height: 400,
                overflow: 'hidden',
                borderRadius: '100%',
            }}
        >
            <CircularProgressbar
                value={percentage}
                background
                backgroundPadding={0}
                styles={{
                    root: {
                        transform: `rotate(${rotateDeg}deg)`,
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                    },
                    background: {
                        fill: '#102558',
                    },
                    path: {
                        stroke: '#00ade9',
                    },
                    trail: {
                        stroke: 'transparent',
                        transform: 'rotate(90deg)',
                        transformOrigin: 'center center',
                        rotation: 1 / 7 + 1 / 10,
                    },
                }}
            />
            <div
                style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    width: '100%',
                    height: `${percentage}%`,
                    background: 'background: "rgb(125 164 255 / 40%)"',
                }}
            ></div>
            <div
                style={{
                    position: 'absolute',
                    top: '50%',
                    left: 0,
                    width: '100%',
                    fontSize: '50px',
                    transform: 'translateY(-50%)',
                    fontWeight: 'bold',
                    color: '#fff',
                }}
            >
                {percentage}%
            </div>
        </div>
    );
}

codesandbox