如何用css实现下图效果？

Question

不知道用什么方法可以实现。
之前用svg做出来了一个，但是闪光点不好实现。
进度条是渐变的。

Answer 1

弄完整比较麻烦...不过那个闪光点我弄过，不知道能不能满足你的要求

CSS

.box {
      position: relative;
      margin: 100px;
    }

    .shadow {
      /* background: rgba(255, 0, 0, 0); */
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      background: #f00;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      opacity: 1;
      box-shadow: 0 0 5px #f00;
      transform: scale(2, 2);
      animation: light 1s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      /* 
      这个属性检索或设置对象动画在循环中是否反向运动
      animation-direction: reverse;
      animation-direction: normal;
      animation-direction: alternate;
      animation-direction: alternate-reverse; */
    }
    
    .dot {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      background: #f00;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    @keyframes light {
      0% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(3, 3);
        opacity: 0;
      }
      100% {
        transform: scale(1, 1);
        opacity: 0;
      }
    }

html

<div class="box">
    <div class="shadow"></div>
    <div class="dot"></div>
</div>