Как анимировать черчение сектора с маленькой круглой головкой в ​​css?

Question

Я хочу создать анимацию с маленьким кружком (r = 10px) при 0 °, который поворачивает рисунок сектора большего радиуса (50px) от -30 ° до + 30 °,

затем поверните движение в обратном направлении, удалив форму от + 30 ° до -30 °. как дворники. я не хочу, чтобы появлялась остальная часть круга, только окружность сектора.

Также он может быть окрашен в неоново-голубой цвет?

РЕДАКТИРОВАТЬ: форма похожа на логотип сигнала Wi-Fi:

body
{
  background-color: #000000;
  margin:auto;
  margin-left:100px;
  margin-top:400px;


}

.container
{


  padding: 0px;
  margin:auto;



}

#e
{

  margin:auto;
  background-color: #67C8FF;
  width:20px;
  height:20px;
  padding: 0px;
  border-radius: 10px;
  margin-top:20px;
  margin-bottom:20px;
  position: relative;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #67C8FF, 0 0 35px #67C8FF, 0 0 40px #67C8FF, 0 0 50px #67C8FF, 0 0 75px #67C8FF;


}

#d
{

  margin:auto;
  background-color: #67C8FF;
  width:20px;
  height:20px;
  padding: 0px;
  border-radius: 10px;
  margin-top:20px;
  margin-bottom:20px;
  position: relative;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #67C8FF, 0 0 35px #67C8FF, 0 0 40px #67C8FF, 0 0 50px #67C8FF, 0 0 75px #67C8FF;


  }

#c
{
  margin:auto;
  background-color: #67C8FF;
  width:20px;
  height:20px;
  padding: 0px;
  border-radius: 10px;
  margin-top:20px;
  margin-bottom:20px;
  position: relative;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #67C8FF, 0 0 35px #67C8FF, 0 0 40px #67C8FF, 0 0 50px #67C8FF, 0 0 75px #67C8FF;


  }


#b
{
  margin:auto;
  background-color: #67C8FF;
  width:20px;
  height:20px;
  padding: 0px;
  border-radius: 10px;
  margin-top:20px;
  margin-bottom:20px;
  position: relative;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #67C8FF, 0 0 35px #67C8FF, 0 0 40px #67C8FF, 0 0 50px #67C8FF, 0 0 75px #67C8FF;

  }

#a
{
  margin:auto;
  background-color: #67C8FF;
  width:30px;
  height:30px;
  padding: 0px;
  border-radius: 15px;
  margin-top:20px;
  margin-bottom:20px;
  position: relative;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #67C8FF, 0 0 35px #67C8FF, 0 0 40px #67C8FF, 0 0 50px #67C8FF, 0 0 75px #67C8FF;

  }


  @keyframes
  {
    ?????

  }

  <div class = "container">
    <div id = "e"></div>
    <div id = "d"></div>
    <div id = "c"></div>
    <div id = "b"></div>
    <div id = "a"></div>

  </div>

Edit:

Я хочу, чтобы он (сигнал Wi-Fi) выглядел следующим неоново-синим цветом: