Круглые ползунки с анимированными индикаторами выполнения – это визуально привлекательные и интерактивные элементы, которые можно использовать в различных веб-приложениях и мобильных приложениях. Они предоставляют удобный способ указать прогресс или позволить пользователям выбирать значения в пределах диапазона. В этой статье мы рассмотрим 10 различных методов создания кругового слайдера с анимированным индикатором выполнения, а также приведем примеры кода.

Метод 1: HTML и CSS (с использованием SVG)

<div class="slider">
  <svg>
    <circle class="progress" cx="50%" cy="50%" r="40%"></circle>
    <circle class="background" cx="50%" cy="50%" r="40%"></circle>
  </svg>
</div>

Метод 2: HTML, CSS и JavaScript (с использованием Canvas)

<canvas id="slider"></canvas>

const canvas = document.getElementById('slider');
const context = canvas.getContext('2d');
// Calculate and draw the progress bar
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle);
context.lineWidth = lineWidth;
context.strokeStyle = progressColor;
context.stroke();

Метод 3: SVG и JavaScript (с использованием Snap.svg)

<svg id="slider"></svg>

const slider = Snap('#slider');
const progress = slider.circle(cx, cy, radius);
progress.attr({
  fill: 'none',
  stroke: progressColor,
  strokeWidth: strokeWidth
});

Метод 4. Анимация CSS3

<div class="slider"></div>

@keyframes progressAnimation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.slider {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid progressColor;
  animation: progressAnimation 2s linear infinite;
}

Метод 5: JavaScript и CSS (с использованием таких библиотек, как ProgressBar.js)

<div class="slider"></div>

const progressBar = new ProgressBar.Circle('.slider', {
  color: progressColor,
  strokeWidth: lineWidth,
  duration: animationDuration,
  easing: 'linear'
});
progressBar.animate(progressValue);

Метод 6: React (с использованием таких библиотек, как React Circular Progressbar)

import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
const Slider = () => (
  <div>
    <CircularProgressbar
      value={progressValue}
      text={`${progressValue}%`}
      strokeWidth={lineWidth}
      styles={{
        path: {
          stroke: progressColor,
          strokeLinecap: 'butt'
        },
        trail: {
          stroke: backgroundColor,
          strokeLinecap: 'butt'
        }
      }}
    />
  </div>
);

Метод 7: Angular (с использованием таких библиотек, как ngx-progressbar)

<ngx-progressbar
  [value]="progressValue"
  [color]="progressColor"
  [strokeWidth]="lineWidth"
  [animate]="true"
>
</ngx-progressbar>

Метод 8: Vue.js (с использованием таких библиотек, как vue-progressbar)

<template>
  <vue-progress-bar
    :percentage="progressValue"
    :color="progressColor"
    :height="lineWidth"
  ></vue-progress-bar>
</template>
<script>
import VueProgressBar from 'vue-progressbar';
export default {
  components: {
    VueProgressBar
  },
  data() {
    return {
      progressValue: 50,
      progressColor: 'blue',
      lineWidth: 10
    };
  }
};
</script>

Метод 9: Flutter (с использованием таких библиотек, как round_slider)

CircularSlider(
  initialPercentage: progressValue,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey,
  width: lineWidth,
  onChanged: (value) {
    setState(() {
      progressValue = value;
    });
  },
)

Метод 10: SwiftUI (с использованием таких библиотек, как CircularProgressView)

CircularProgressView(progress: progressValue)
  .stroke(progressColor, lineWidth: lineWidth)
  .background(backgroundColor)

В этой статье мы рассмотрели 10 различных способов создания круглого слайдера с анимированным индикатором выполнения. Предпочитаете ли вы использовать HTML и CSS, JavaScript или популярные библиотеки в различных средах, таких как React, Angular, Vue.js, Flutter или SwiftUI, существует множество вариантов достижения желаемого эффекта. Выберите метод, соответствующий требованиям вашего проекта, и начните создавать интерактивные и визуально привлекательные круглые слайдеры с анимированными индикаторами выполнения.