Создание загрузчика прогресса в форме сердца |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

Я не думаю, что возможно заполнить сердце снизу вверх так, как вы хотите, если оно создано с использованием псевдоэлементов.

Это возможно с SVG с clipPath, хотя - что-то вроде этого:

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>

(см. песочница )