How to create a progress animation?

Question

css

Good afternoon!
There was such a problem.
How can I implement this kind of animation

Now I have done this https://codepen.io/vitstar/pen/bMYRXb
But in the picture, after filling the border, it starts to erase from the same point. And I just play back the animation.
How can I implement this 2nd part of the animation?

Answer 1

https://codepen.io/anon/pen/PeORdx
loading1