How can I make a loader with increasing the border color size

Answer 1

<style>
body{
display:grid;
place-items:center;
height:100vh;
}
.loader{
border:1px solid blue;
width:10px;
height:10px;
background-color:red;
border-radius:50%;
animation: morph 2s alternate infinite;
}
@keyframes morph{
0%{
transform:scale(0px);
}
50%{
border-color:green;
}
100%{
transform:scale(500%) rotate(720deg);
border-radius:0;
border-color:red;
border-style:dotted;
background-color:gold;
}
}
</style>

<div class="loader"></div>

Answer 2

What did you try till now? Show your code.

Answer 3

What programmin language? I might help if its Python.