Я застрял в проблеме уже 2 дня. Я постараюсь кратко рассказать об этом, но результат должен выглядеть следующим образом:
В настоящее время я не знаю, как это сделать, я попытаюсь начать с жестко запрограммированного значения, а затем попытаюсь сопоставить процент круга с реальным значением. (Не обращайте внимания на круг посередине, я сделаю это позже)
Вот то, к чему я пришел до сих пор, это не имеет смысла, но это единственный способ, который я нашел, чтобы сделать 75% круга:
svg {
margin: 15px;
}
.loader {
stroke: red;
stroke-width: 6;
stroke-dasharray: 258;
transform-origin: center;
transform: rotate(135deg);
fill: transparent;
}
.loader.grey {
stroke: #c1c1c1;
}
<svg class = "loader-svg" width = "110" height = "110" viewBox = "0 0 130 130">
<circle
class = "loader grey"
cx = "65"
cy = "65"
r = "55"
></circle>
</svg>
Обновлено: мне также нужно иметь точные 10 тире, и мне не нужно его анимировать
анимация предназначена для иллюстрации, в ней нет необходимости;) просто удалите ее .. и вы можете получить 10 или 20 или любое количество штрихов, просто изменив значения. Я просто дал общий ответ
Я посмотрю на твой и попробую отредактировать :)
Вы можете попробовать это:
svg {
margin: 15px;
}
.loader {
stroke: red;
stroke-width: 6;
stroke-dasharray: 262,350; /*75%*/
transform-origin: center;
transform: rotate(135deg);
fill: transparent;
animation:change 5s linear infinite alternate;
}
.loader.grey {
stroke: #c1c1c1;
}
@keyframes change {
from{stroke-dasharray: 0,350;} /*0%*/
to{stroke-dasharray: 350,350;} /*100%*/
}
<svg class = "loader-svg" width = "110" height = "110" viewBox = "0 0 130 130">
<circle
class = "loader grey"
cx = "65"
cy = "65"
r = "55"
></circle>
</svg>
Для тире просто добавьте еще один кружок вверху:
svg {
margin: 15px;
}
.loader {
stroke: red;
stroke-width: 6;
stroke-dasharray: 262,350; /*75%*/
transform-origin: center;
transform: rotate(135deg);
fill: transparent;
animation:change 5s linear infinite alternate;
}
.loader.grey {
stroke: #c1c1c1;
}
.dash {
stroke: #fff;
stroke-width: 6;
stroke-dasharray: 17; /*adjust this to control the dashes*/
transform-origin: center;
transform: rotate(135deg);
fill: transparent;
}
@keyframes change {
from{stroke-dasharray: 0,350;} /*0%*/
to{stroke-dasharray: 350,350;} /*100%*/
}
<svg class = "loader-svg" width = "110" height = "110" viewBox = "0 0 130 130">
<circle
class = "loader grey"
cx = "65"
cy = "65"
r = "55"
></circle>
<circle
class = "dash"
cx = "65"
cy = "65"
r = "55"
></circle>
</svg>
Я обнаружил, что моя проблема не в том, что я думал, но это все еще хороший ответ, и я буду использовать его не для тире, а для зеленого уровня у меня будет фоновый серый круг, на z-index 2 я буду есть мой зеленый уровень, а на z-index 3 белые пути, которые будут действовать, как если бы серый кружок был заштрихован.
Я не совсем уверен, в чем ваш вопрос, но если вы спрашиваете, как окрасить часть вашего круга в другой цвет, самый простой способ сделать это - сделать копию круга, отрегулировать ширину, поместить ее на верхней части первого круга и измените цвет для этого.