创建心形进度装载机|Reactjs

Question

我想为一个反应项目做一个心形进度加载程序。我尝试使用CSS。但是，它没有正确地显示进度，就像它仅涵盖心脏设计的某些部分一样。以下是我尝试这样做的代码。如果是100％，则该进度应从底部开始，需要达到。请检查并让我知道，我该如何实现。

预先感谢

/***Progress***/
import React, { Component } from 'react';
import ProgressBar from './ProgressBar';
 class Progress extends Component {
    constructor(props) {
        super(props);
        this.state = {
            percentage: 60,
        }
    }
  render() {
    return (
      <div>
        <ProgressBar percentage={this.state.percentage}/>
      </div>
    )
  }
}
export default Progress
/***Progress bar***/
import React from 'react';
import Filler from './Filler.js';
const ProgressBar = (props) => {
    return (
        <div className="ProgressBarH">
            <Filler percentage={props.percentage}/>
        </div>
    )
}
export default ProgressBar;
/***Filler***/
import React from 'react';
const Filler = (props) => {
    return (
        <div className = "filler" style={{width: `${props.percentage}%`}} />
    )
}
export default Filler;
/***css***/
.ProgressBarH {
  position: relative;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid #ff7777 ;
  background-color:#ff7777;
  margin: 0 auto;
}
.ProgressBarH:before,
.ProgressBarH:after {
  position: absolute;
  width: 12px;
  height: 12px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
   background-color:#ff7777; 
}
.ProgressBarH:before {
  bottom: -1px;
    left: -8px;
}
.ProgressBarH:after {
  top: -8px;
    right: -1px;
} 
.filler {
  /* background: red; */
  height: 100%;
  border-radius: inherit;
  transition: width .2s ease-in;
}

Answer 1

我认为，如果使用伪元素创建它，则不可能按照您想要的方式填充心脏。

虽然可以使用clipPath的SVG - 类似的东西：

const ProgressBar = props => {
  const y = 24 - (24 * props.percentage) / 100;
  return (
    <div className="ProgressBarH">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <defs>
          <clipPath id="cut-off-bottom">
            <rect x="0" y={y} width="24" height="24" />
          </clipPath>
        </defs>
        <path
          style={{ fill: "red" }}
          d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"
          clipPath="url(#cut-off-bottom)"
        />
      </svg>
    </div>
  );
};

快速而肮脏的沙箱：https：//codesandbox.io/s/optimistic-bird-8g63q

编辑以添加黑色边框：

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="26"
    height="26"
    viewBox="0 0 26 26"
  >
    <defs>
      <clipPath id="cut-off-bottom">
        <rect x="0" y={y} width="26" height="24" />
      </clipPath>
    </defs>
    <path
      style={{ fill: "red" }}
      d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"
      clipPath="url(#cut-off-bottom)"
    />
    <path
      style={{ stroke: "black", strokeWidth: "2", fill: "none" }}
      d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"
    />
  </svg>

(请参阅沙箱(