Индикаторы выполнения — это распространенная функция в веб-разработке, предоставляющая пользователям визуальную информацию о статусе выполнения задачи. В этой статье мы рассмотрим различные методы создания круга индикатора выполнения с помощью React и Tailwind CSS. Мы рассмотрим примеры кода и познакомим вас с каждым подходом, чтобы вы могли выбрать метод, который лучше всего соответствует потребностям вашего проекта.

Метод 1: круг SVG
Один из способов создать круг индикатора выполнения — использовать SVG (масштабируемую векторную графику) и React. Вы можете определить элемент круга с соответствующими атрибутами, такими как радиус, ширина обводки и цвет обводки. Управляя свойствами Stroke-Dasharray и Stroke-DashOffset, вы можете анимировать круг, отображая прогресс.

import React from 'react';
const ProgressBarCircle = ({ progress, radius }) => {
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (progress / 100) * circumference;
  return (
    <svg width={radius * 2} height={radius * 2}>
      <circle
        r={radius}
        cx={radius}
        cy={radius}
        stroke="#6B7280"
        strokeWidth="4"
        fill="transparent"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
      />
    </svg>
  );
};
export default ProgressBarCircle;

Метод 2: библиотека React Progress Circle.
Другой подход заключается в использовании существующих библиотек React, которые предоставляют компоненты цикла выполнения. Одной из таких библиотек является «react-circle», которая упрощает процесс создания кругов прогресса.

npm install react-circle

import React from 'react';
import { CircularProgressbar } from 'react-circle';
const ProgressBarCircle = ({ progress }) => (
  <div style={{ width: '100px' }}>
    <CircularProgressbar
      value={progress}
      text={`${progress}%`}
      styles={{
        path: {
          stroke: '#6B7280',
          strokeLinecap: 'round',
          transition: 'stroke-dashoffset 0.5s ease 0s',
        },
        trail: {
          stroke: '#D1D5DB',
        },
        text: {
          fill: '#6B7280',
          fontSize: '16px',
          fontWeight: 'bold',
        },
      }}
    />
  </div>
);
export default ProgressBarCircle;

Метод 3: преобразование CSS и анимация
Вы также можете создать круг индикатора выполнения, используя преобразования CSS и анимацию. Вращая полукруг и анимируя его вращение в зависимости от значения прогресса, вы можете добиться эффекта кругового индикатора выполнения.

import React from 'react';
const ProgressBarCircle = ({ progress }) => (
  <div className="progress-bar-circle">
    <div
      className="progress-bar-circle__fill"
      style={{ transform: `rotate(${(progress / 100) * 360}deg)` }}
    />
  </div>
);
export default ProgressBarCircle;

.progress-bar-circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #D1D5DB;
  overflow: hidden;
}
.progress-bar-circle__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #6B7280;
  transform-origin: center bottom;
  animation: fill-animation 2s linear forwards;
}
@keyframes fill-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Метод 4: React Native SVG
Если вы работаете над проектом React Native, вы можете использовать библиотеку «react-native-svg», чтобы создать кружок индикатора выполнения. Он использует тот же подход, что и метод 1, но с некоторыми изменениями для мобильной среды.

npm install react-native-svg

import React from 'react';
import { Circle, Svg } from 'react-native-svg';
const ProgressBarCircle = ({ progress, radius }) => {
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (progress / 100) * circumference;
  return (
    <Svg width={radius * 2} height={radius * 2}>
      <Circle
        r={radius}
        cx={radius}
        cy={radius}
        stroke="#6B7280"
        strokeWidth="4"
        fill="transparent"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
      />
    </Svg>
  );
};
export default ProgressBarCircle;

Метод 5: Плагин индикатора выполнения Tailwind CSS
Tailwind CSS предлагает плагин под названием «tailwindcss-progress», который добавляет утилиты стилизации специально для индикаторов выполнения. Установив и настроив этот плагин, вы можете легко создать кружок индикатора выполнения в Tailwind CSS.

npm install tailwindcss-progress

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('tailwindcss-progress')([
      {
        name: 'circle',
        color: '#6B7280',
        size: '100px',
        strokeWidth: '4',
      },
    ]),
  ],
};

import React from 'react';
const ProgressBarCircle = ({ progress }) => (
  <div className="progress-bar-circle">
    <div className="progress-bar-circle__fill" style={{ '--progress': `${progress}%` }} />
  </div>
);
export default ProgressBarCircle;

@layer utilities {
  .progress-bar-circle {
    @apply progress-circle;
    --progress: 0;
  }
  .progress-bar-circle__fill {
    @apply progress-circle-fill;
    --tw-progress-circle-rotation: calc(var(--progress) * 3.6deg);
  }
}

В этой статье мы рассмотрели пять различных методов создания круга индикатора выполнения в React с использованием Tailwind CSS. Предпочитаете ли вы использовать SVG, существующие библиотеки React, преобразования CSS, плагины React Native SVG или Tailwind CSS, вы можете выбрать подход, который соответствует требованиям вашего проекта. Внедрив один из этих методов, вы сможете улучшить взаимодействие с пользователем, предоставляя визуальную информацию о завершении задачи.