reactjs 如何在React循环进度条中从底部启动进度条？

kwvwclae 于 2023-03-12 发布在 React

关注(0)|答案(1)|浏览(173)

我在我的React JS项目中使用react-circular-progressbar。我想让完成的进度条从底部开始，并在两边均匀移动。另外，这个圆形进度条覆盖的区域应该有一些背景（ Azure ）。我尝试添加

transform: rotate(270deg);

但这似乎不起作用。下面是该组件的完整代码：

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;

**注意：**这里我没有使用buildStyles对象，因为它不允许改变文本的字体粗细。下面是codesandbox的例子：https://codesandbox.io/s/circular-progressbar-demo-1-s8enfw

reactjs

来源：https://stackoverflow.com/questions/75669202/how-to-start-progress-bar-from-bottom-in-react-circular-progressbar

1条答案

按热度按时间

gudnpqoy1#

可以按百分比值计算旋转度

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

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 如何在React循环进度条中从底部启动进度条？

1条答案

相关问题

热门标签

最新问答