Css countdown circled animation-CodePudding

I am trying to create a circled countdown animation. I have created almost all the parts except I can't add another circle inside the circle that should animate together down.

All I need is to get the exact same animated version of the below image.

Here is the code snippet I have reached so far. I am just not good at svgs and can't insert the small circle.

body {
  height: 100%;
  width: 100%;
  background-color: #333;
}

#countdown {
  position: relative;
  margin: auto;
  margin-top: 100px;
  height: 40px;
  width: 40px;
  text-align: center;
}

#countdown-number {
  color: white;
  display: inline-block;
  line-height: 40px;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: #198051;
  fill: none;
  animation: countdown 30s linear infinite forwards;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}

<div id="countdown">
  <div id="countdown-number"></div>
  <svg>
    <circle r="18" cx="20" cy="20"></circle>
  </svg>
</div>

EDIT FYI - I just need to add the small light green circle inside the animation.

CodePudding user response：

I`m used to do this stuff with css. You can inset a square(purple) into #countdown(green), justify a smaller box(red) and then rotate the hole thing. (To convert red box to circle just round the corners)

body {
  height: 100%;
  width: 100%;
  background-color: #333;
}

#countdown {
  position: relative;
  margin: auto;
  margin-top: 100px;
  height: 40px;
  width: 40px;
  text-align: center;
  border: 1px solid green;
}

#small-circle-box{
  display:grid;
  justify-items: center;
  position:absolute;
  inset:-5px;
  border: 2px solid purple;
  animation: rotate 30s linear infinite forwards;
}

#small-circle{
  height:10px;
  width: 10px;
  background-color: red;
}

#countdown-number {
  color: white;
  display: inline-block;
  line-height: 40px;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: #198051;
  fill: none;
  animation: countdown 30s linear infinite forwards;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}

@keyframes rotate {
  from {
   transform:rotate(0);
  }
  to {
    transform:rotate(-360deg);
  }
}

<div id="countdown">
  <div id="countdown-number"></div>
  <div id="small-circle-box"><div id="small-circle"></div></div>
  <svg>
    <circle r="18" cx="20" cy="20"></circle>
  </svg>
</div>

CodePudding user response：

I added some extra circles to the SVG and a keyframe animation that rotates the circle #c1.

And then I think it would make sense to let the text be part of the SVG as well.

body {
  background-color: #333;
}

#countdown {
  margin: 10px;
  height: 160px;
  width: 160px;
}

svg circle#c2 {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke: #198051;
  animation: countdown 30s linear infinite forwards;
}

svg circle#c3 {
  stroke: #198051;
  opacity: .3;
}

circle#c1 {
  fill: lime;
  animation: rotate 30s linear infinite forwards;
}

svg text {
  font-family: sans-serif;
  fill: white;
  font-weight: bold;
  dominant-baseline: middle;
  text-anchor: middle;
  font-size: 12px;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

<div id="countdown">
  <svg viewBox="0 0 40 40">
    <g transform="translate(20 20) rotate(-90)"
      stroke-width="4" fill="none" stroke-linecap="round">
      <circle id="c3" r="18"/>
      <circle id="c2" r="18"/>
      <circle id="c1" r="2" cx="18"/>
    </g>
    <text x="20" y="20">46</text>
  </svg>
</div>