SVG circle not appearing in HTML CSS-CodePudding

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

CodePudding user response：

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>