/* HTML */
<div class="wrapper_6"></div>


/* CSS */
.wrapper_6{
	width:250px;
	height:20px;
	margin:10px auto;
	border: 2px dotted rgb(255,255,0);
	border-radius:9px;
	text-align:left;
	background: linear-gradient(to right, rgba(32, 167, 77, .3) 0%, rgb(0, 0, 0) 0%);
	animation: bg_go_right 2s infinite;
}

@keyframes bg_go_right {
  0% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 0%, rgb(0, 0, 0) 0%);
	animation-timing-function: linear;
  }
  10% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 10%, rgb(0, 0, 0) 10%);
	animation-timing-function: linear;
  }
  20% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 20%, rgb(0, 0, 0) 20%);
	animation-timing-function: linear;
  }
  30% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 30%, rgb(0, 0, 0) 30%);
	animation-timing-function: linear;
  }
  40% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 40%, rgb(0, 0, 0) 40%);
	animation-timing-function: linear;
  }
  50% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 50%, rgb(0, 0, 0) 50%);
	animation-timing-function: linear;
  }
  60% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 60%, rgb(0, 0, 0) 60%);
	animation-timing-function: linear;
  }
  70% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 70%, rgb(0, 0, 0) 70%);
	animation-timing-function: linear;
  }
  80% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 80%, rgb(0, 0, 0) 80%);
	animation-timing-function: linear;
  }
  90% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 90%, rgb(0, 0, 0) 90%);
	animation-timing-function: linear;
  }
  100% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3+) 100%, rgb(0, 0, 0) 100%);
	animation-timing-function: linear;
  }
}