Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

CSS для кругового прогресс-бара

Добавлено: 13.03.2023 01:02

Напиши примеры кода на HTML и CSS для кругового прогресс-бара, который будет применять значение из data атрибута тега в html

ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 13.03.2023 01:02

HTML:

<div data-progress="20" class="progress-circle"></div>

CSS:

.progress-circle {
    width:100px; 
    height:100px; 
    border-radius:50%;
    position:relative;
}

.progress-circle::after {
    content:"";
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:#cfcfcf;
    position:absolute;
    top: 0px;
    left: 0px;
    transform: rotate(-90deg);
}

.progress-circle::before {
    content:"";
    width:100px;
    height:100px;
    background-color:#00A0F1;
    position:absolute;
    top: 0px;
    left: 0px;
    border-radius:50%;
    transform: rotate(-90deg);
    animation: progess-circle var(--progress)s linear  1;
}

@keyframes progress-circle {
    0% {transform:rotate(-90deg);}
    100%{transform:rotate(270deg);}
}
Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

Добавлено: 13.03.2023 01:05

данные пример не отображает линию прогресс-бара, приведи пример кода для отображения полоски прогресс-бара толщиной 5px и скруглением 5px углов

ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 13.03.2023 01:05

HTML:

<div data-progress="40" class="progress-bar"></div>

CSS:

.progress-bar {
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background-color: #cfcfcf;
    position: relative;
}

.progress-bar::before {
    content:"";
    width: var(--progress, 0%);
    height: 100%;
    background-color: #00A0F1;
    position: absolute;
    border-radius: 5px;
}

[data-progress]:before {
    --progress: calc( var(--progress) / 100 * 100% );
    width: var(--progress);
}

/* оставшиеся стили можно добавить на свое усмотрение */

Обрати внимание на использование переменной --progress которая устанавливается через атрибут data-progress у элемента прогресс-бара. Также при помощи псевдоэлемента ::before можно отображать полосу прогресса внутри элемента.

Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

Добавлено: 13.03.2023 01:06

Приведи пример кода для кругового прогресс-бара со значением 33% состоящего из линии по окружности толщиной 5px и скруглением этой линии на 5px

ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 13.03.2023 01:07

HTML:

<div data-progress="33" class="progress-circle"></div>

CSS:

.progress-circle {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
}

.progress-circle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #cfcfcf;
}

.progress-circle::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #00A0F1;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(var(--progress, 0deg));
}

[data-progress]:after {
    --progress: calc(var(--progress) / 100 * 360deg);
}

/* оставшиеся стили можно добавить на свое усмотрение */

Обрати внимание на использование переменной --progress которая устанавливается через атрибут data-progress у элемента прогресс-бара. Она задает угол поворота псевдоэлемента ::after, который отображает линию по окружности. Скругление устанавливается через свойство border-radius.

Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

Добавлено: 13.03.2023 01:33

приведи пример radial bar apexcharts.js с тенью и изменением цвета от красного к зеленому в зависимости от процента заполнения прогресса. Где 0% это красный, а 100% зеленый. Добавь анимацию для отображения от 0 до текущего значения прогресс-бара.

ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 13.03.2023 01:33

Для использования библиотеки ApexCharts, необходимо сначала подключить ее к проекту. Например через CDN:

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.26.3/dist/apexcharts.min.js"></script>

HTML:

<div id="chart"></div>

JavaScript:

var options = {
    chart: {
        type: "radialBar",
        height: "400px",
    },
    series: [33],
    plotOptions: {
        radialBar: {
            startAngle: -90,
            endAngle: 270,
            hollow: {
                margin: 0,
                size: "70%",
                background: "#fff",
                image: undefined,
                imageOffsetX: 0,
                imageOffsetY: 0,
                position: "front",
                dropShadow: {
                    enabled: true,
                    top: 0,
                    left: 0,
                    blur: 3,
                    opacity: 0.5
                }
            },
            track: {
                background: 'rgba(146,146,146,0.5)',
                strokeWidth: '50px',
                margin: 0,
                dropShadow: {
                    enabled: true,
                    top: 1,
                    left: 0,
                    blur: 3,
                    opacity: 0.1
                }
            },
            dataLabels: {
                showOn: "always",
                name: {
                    offsetY: -5,
                    show: true,
                    color: "#888",
                    fontSize: "14px"
                },
                value: {
                    formatter: function (val) {
                        return val + "%";
                    },
                    color: "#111",
                    fontSize: "30px",
                    show: true,
                }
            }
        }
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

setInterval(function() {
    var progress = Math.floor(Math.random() * 101);
    chart.updateSeries([progress]);
    chart.updateOptions({
        plotOptions: {
            radialBar: {
                dataLabels: {
                    style: {
                        colors: ["#ff0000", getColor(progress), getColor(progress)]
                    }
                }
            }
        } 
    });
}, 3000);

function getColor(progress) {
    var red = 255;
    var green = 0;
    if (progress > 50) {
        red = Math.floor((50 - (progress % 50)) * 5.1);
        green = 255;
    } else {
        green = Math.floor((progress % 50) * 5.1);
    }
    return "rgb(" + red + "," + green + ",0)";
}

В этом примере мы создали элемент с id chart и инициализировали график типа radialBar с начальным значением 33. Для изменения значения прогресс-бара используется setInterval, который каждые 3 секунды меняет значение на случайное значение от 0 до 100.

Цвет линии прогресса изменяется в зависимости от процента заполнения. Мы создали функцию getColor которая принимает значение прогресса и возвращает цвет от красного (#ff0000) до зеленого (#00ff00). Этот цвет используется для изменения стиля элемента с помощью метода chart.updateOptions.

Анимация заполняемости графика настроена по умолчанию. Чтобы изменить продолжительность анимации можно использовать свойство strokeDashArray.