I did try something similar before, unfortunately, I get the following error in my heex file:
code:
<div
x-data="scrollProgress"
class="fixed inline-flex items-center justify-center overflow-hidden rounded-full bottom-5 left-5"
>
<!-- Building a Progress Ring: https://css-tricks.com/building-progress-ring-quickly/ -->
<svg class="w-20 h-20">
<circle
class="text-gray-300"
stroke-width="5"
stroke="currentColor"
fill="transparent"
r="30"
cx="40"
cy="40"
/>
<circle
class="text-blue-600"
stroke-width="5"
:stroke-dasharray="circumference"
:stroke-dashoffset="circumference - percent / 100 * circumference"
stroke-linecap="round"
stroke="currentColor"
fill="transparent"
r="30"
cx="40"
cy="40"
/>
</svg>
<span class="absolute text-xl text-blue-700" x-text="`${percent}%`"></span>
</div>
error
== Compilation error in file lib/web_interface/live/activate_live.ex ==
** (Phoenix.LiveView.Tokenizer.ParseError) lib/web_interface/live/activate_live.html.heex:22:11: unsupported attribute ":stroke-dasharray" in tags
|
19 | <circle
20 | class="text-blue-600"
21 | stroke-width="5"
22 | :stroke-dasharray="circumference"
| ^
(phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:1383: Phoenix.LiveView.TagEngine.raise_syntax_error!/3
(phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:656: Phoenix.LiveView.TagEngine.handle_token/2
(elixir 1.15.4) lib/enum.ex:2510: Enum."-reduce/3-lists^foldl/2-0-"/3
(phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:182: Phoenix.LiveView.TagEngine.handle_body/1
(phoenix_live_view 0.18.18) expanding macro: Phoenix.LiveView.HTMLEngine.compile/1
lib/web_interface/live/activate_live.html.heex:1: WebInterface.ActivateLive.render/1
(phoenix_live_view 0.18.18) c:/Users/pedro/Documents/market_manager/apps/web_interface/lib/web_interface/live/activate_live.ex:1: Phoenix.LiveView.Renderer.__before_compile__/1
