SVG circle not appearing in HTML CSS - html

Question

I am creating a really simple loader page for my application. I wanted to use a circle, that rotates, and as I saw a tutorial, I used the SVG and circle tags. Here is the code HTML:
<div className="loader">
<svg className="svg">
<circle cx="70" cy="70" height="100px" width="100px" />
</svg>
</div>
And here is all the involved CSS in this case:
.loader{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.svg{
width: 150px;
height: 150px;
animation: rotate 2s linear infinite;
}
#keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.svg circle{
background-color: red;
width: 1em;
height: 1em;
fill: var(--redwine);
stroke-width: 10;
stroke: var(--redwine);
stroke-linecap: round;
transform:translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
animation: circular 4s linear infinite;
z-index: 100;
}
#keyframes circular{
0%, 100%{
stroke-dashoffset: 440;
}
50%{
stroke-dashoffset: 0;
}
50.1%{
stroke-dashoffset: 880;
}
}
The only problem with all this code is that whenever I open the page, to see if all is working, it gives me an empty page. So I try to inspect. When I hover in the browser the code of SVG, it shows the shadow of a square that rotates, but when I hover the circle code, it shows a point with the following label: circle 0x0. I think that it is not rendering correctly, or I am blocking it. I don't really know.
Can someone help? Thank you a lot

Answer 1

You are missing the radius attribute r.
<circle cx="70" cy="70" r="25" height="100px" width="100px" />
See below:
.loader {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.svg {
width: 150px;
height: 150px;
animation: rotate 2s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.svg circle {
background-color: red;
width: 1em;
height: 1em;
fill: var(--redwine);
stroke-width: 10;
stroke: var(--redwine);
stroke-linecap: round;
transform: translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
animation: circular 4s linear infinite;
z-index: 100;
}
#keyframes circular {
0%,
100% {
stroke-dashoffset: 440;
}
50% {
stroke-dashoffset: 0;
}
50.1% {
stroke-dashoffset: 880;
}
}
<div className="loader">
<svg className="svg">
<circle cx="70" cy="70" r="25" height="100px" width="100px" />
</svg>
</div>