.line-box {
top:10px;
left: 10px;
overflow: hidden;
position: absolute;
display: block
}
.line-box svg {
position: relative;
top: -24px;
}
.path {
animation: dash 20s linear infinite;
-moz-animation: dash 20s linear infinite;
-webkit-animation: dash 20s linear infinite;
-o-animation: dash 20s linear infinite;
-ms-animation: dash 20s linear infinite;
}
@keyframes dash {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 2000;}
}
@-moz-keyframes dash {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 2000;}
}
@-webkit-keyframes dash {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 2000;}
}
@-o-keyframes dash {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 2000;}
}
@-ms-keyframes dash {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 2000;}
}
<div class="line-box">
<svg height="70" width="400">
<path d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>
<path stroke-dasharray="6,6" d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>
<path d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>
<path stroke-dasharray="6,6" d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>
</svg>
</div>