Question

我想为React项目制作一个心形进度加载器。我尝试使用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>

（请参见sandbox）

创建心形进度加载器| React.js

1 个答案: