Можно ли использовать конический градиент со встроенным стилем?

Question

Я просто играю с CSS. Я вообще не профессионал, поэтому прошу прощения, если это глупый / очевидный вопрос.

Проблема: платформа блогов, для которой я разрабатываю, запрещает любые внешние таблицы стилей, а также использование <style> тег, так что я вынужден делать все встроенное.

Я играл с простым процентным кругом от CodePen ( CSS-процентный круг БоббиХо), который использует конический градиент, и все (даже встроенная адаптированная версия) выглядит потрясающе после разветвления его на CodePen. Но в тот момент, когда я помещаю его на блог-сайт, конический градиент исчезает.

<div id="element" style="width: 200px; height: 200px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: conic-gradient(#39DE57 40%, #513BB3 0);">
    <div class="inner" style="width: 180px; height: 180px; position: relative; background-color: #D6D6D6; border-radius: 50%;font-size: 3em; color: #4F4F4F; display: flex; justify-content: center; align-items: center;">
        40%
    </div>
</div>

Что говорит о том, что градиенты не подходят для встроенных стилей. Я знаю, что они обрабатываются как изображение, а не как цвет, но я действительно думал, что ты мог бы сделать это. Я ошибаюсь? Или я упускаю что-то чрезвычайно очевидное?

Answer 1

Да, он будет работать идеально.

      <div id="progress-spinner" style={{
    background: `conic-gradient(rgb(3, 133, 255) ${progress}%, rgb(242, 242, 242) ${progress}%)`
}}></div>

Вы даже можете поместить его в литерал шаблона и управлять процентом цветовых остановок, как я сделал с моей переменной «прогресс».