I stumbled upon this intriguing design concept on dribbble.
Do you think it's feasible to replicate the circular progress bar (with the progress being shown as the outer border of the circle) within the first few seconds of the gif?
Currently, I've managed to create the basic circle structure without any animation on jsfiddle
What should be my next step in moving forward with this project?
HTML:
<div class="circle"></div>
CSS:
body {
background-color: #3a88cd;
padding: 60px;
}
.circle {
width: 60px;
height: 60px;
background: white;
position: relative;
border-radius: 100%;
}
.circle:after {
content: "";
display: block;
position: absolute;
top: -8px;
left: -8px;
bottom: -8px;
right: -8px;
border: 3px solid white;
border-radius: 100%;
}