<div class="rt-n-banner-paginator-item rt-n-banner-paginator-item--active">
  <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" class="rt-n-banner-paginator-round" style="stroke-dashoffset: 45px;">
    <circle stroke-width="1.5" cx="9" cy="9" r="7" fill="none" class="rt-n-banner-paginator-oval"></circle>
  </svg>
</div>

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box} 
ul,ol{padding: 0;margin: 0;} 
li{list-style-type: none;} 
h1,h2,h3,h4,p, .h1, .h2, .h3, .h4{line-height: normal;margin: 0;padding: 0;} 
html {height: 100%;} 
body {line-height: normal;color: #000;height: 100%;}
/* =========================================================== */



.rt-n-banner-paginator-item {
  width: 24px;
  height: 24px;
  padding: 3px;
  position: relative;
  z-index: 20;
  pointer-events: auto;
}
.rt-n-banner-paginator-item:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #b0b2b7;
  border-radius: 50%;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: background-color;
  transition-property: background-color;
}
.rt-n-banner-paginator-item--active:before {
  background-color: #ff4f12;
}
.rt-n-banner-paginator-round {
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  transform: rotate(275deg );
  animation: circle 3s linear forwards infinite;
}
.rt-n-banner-paginator-oval {
  stroke: #ff4f12;
}
@keyframes circle {
  0% {
    stroke-dashoffset: 45;
  }
  100% {
    stroke-dashoffset: 0;
  }
}