Progress circle bar

227

Для создания круглого прогресс бара, Вам необходимо создать числовое поле от 1-5 например ‘oczenka_igrokov’. Далее создаем код php и шорткод progress_bar. Все сделано на основе svg. Далее Вам останется только вывести шорткод в нужное место на сайте.

				
					function custom_progress_bar_shortcode($atts) {
    ob_start();

    // Получаем значение поля "oczenka_igrokov"
    $oczenka = get_field('oczenka_igrokov');

    // Определяем размеры круга и шрифта
    $circle_radius = 55;       // Радиус круга
    $circle_thickness = 3;    // Толщина заполнения круга
    $font_size = 20;           // Размер шрифта числа

    // Определяем процент заполнения первого слоя с шагом 0.1
    $progress_percentage = ($oczenka / 5) * 100;  // Основано на максимальном значении 5
    $progress_percentage = round($progress_percentage, 1);

    // Определяем угол обрезания первого слоя
    $clip_angle = 360 - $progress_percentage * 3.6; // Обратный угол обрезания для правильного отображения прогресса

    // Определяем цвет в зависимости от значения "oczenka_igrokov"
    if ($oczenka >= 4) {
        $color = '#5BCE58';   // Зеленый цвет для высокого рейтинга
    } elseif ($oczenka >= 3) {
        $color = '#FDC73E';  // Желтый цвет для среднего рейтинга
    } else {
        $color = '#FF6853';     // Красный цвет для низкого рейтинга
    }

    // Выводим SVG-код для кругов и числа
    echo '<svg xmlns="http://www.w3.org/2000/svg" width="'.$circle_radius.'" height="'.$circle_radius.'" viewBox="0 0 '.$circle_radius.' '.$circle_radius.'">';
    echo '<circle cx="'.($circle_radius/2).'" cy="'.($circle_radius/2).'" r="'.($circle_radius/2 - $circle_thickness).'" stroke="'.$color.'" stroke-width="'.$circle_thickness.'" fill="none" />';
    echo '<circle cx="'.($circle_radius/2).'" cy="'.($circle_radius/2).'" r="'.($circle_radius/2 - $circle_thickness).'" stroke="#EEE" stroke-width="'.$circle_thickness.'" fill="none" stroke-dasharray="'.(2 * M_PI * ($circle_radius/2 - $circle_thickness)).'" stroke-dashoffset="'.(2 * M_PI * ($circle_radius/2 - $circle_thickness)) * ($oczenka/5).'" transform="rotate(-90 '.($circle_radius/2).' '.($circle_radius/2).')" />';
    echo '<text x="50%" y="47%" text-anchor="middle" alignment-baseline="central" font-size="'.$font_size.'" font-weight="bold" fill="black">'.$oczenka.'</text>';
    echo '</svg>';

    $output = ob_get_clean();
    return $output;
}
add_shortcode('progress_bar', 'custom_progress_bar_shortcode');

				
			

Получить консультацию

Мы свяжется с вами в ближайшее время