JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle"><span class = "percent">80%</span></div>

CSS

.circle{
			text-align: center;
			box-sizing:border-box;
			width: 50px;
			height: 100px;
			background:white;
			position: relative;
			animation:myRotate 2s  linear forwards;
			-webkit-animation:myRotate 2s  linear forwards;
		}
		.circle:before{
			box-sizing:border-box;
			content: "";
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 50px;
			height: 100px;
			border: solid;
			border-width:10px 0 10px 10px;
			border-color:#0cf;
			border-radius: 50px 0 0 50px;/*画半圆*/
			background:white;
			transform:rotate(0deg);
			transform-origin:50px 50px;
			/*transition:transform 1s;*/
			animation:myRotate-before 2s  linear forwards;
			-webkit-animation:myRotate-before 2s  linear forwards;
		}
		.circle:after{
			box-sizing:border-box;
			content: "";
			position: absolute;
			z-index: -2;
			top: 0;
			left: 0;
			width: 50px;
			height: 100px;
			border: solid;
			border-width:10px 0 10px 10px;
			border-color:#0cf;
			border-radius: 50px 0 0 50px;/*画半圆*/
			background:white;
			transform:rotate(180deg);
			transform-origin:50px 50px;
			animation:myRotate-after 2s linear forwards;
			-webkit-animation:myRotate-after 2s  linear forwards;
			opacity: 0;
		}
		@-webkit-keyframes myRotate-before /* Safari and Chrome */
		{
		from {transform:rotate(0deg);}
		to {transform:rotate(320deg);}
		}
		@-webkit-keyframes myRotate-after  /*Safari and Chrome*/
		{
		0%{
		    opacity:0;
		  }
		  55%
		  {
		    opacity:0;
		  }
		  56%
		  {
		    opacity:1;
		  }
		  100%
		  {
		    opacity:1;
		  }
		}
		@-webkit-keyframes myRotate  /*Safari and Chrome*/
		{
		0%{
		   background:white;
		  }
		  56%
		  {
		    background:white;
		  }
		  57%
		  {
		    background:transparent;
		  }
		  100%
		  {
		    background:transparent;
		  }
		}
		.percent{
			color: #0cc;
			font-size: 20px;
			line-height: 100px;
			display: block;
			vertical-align: middle;
			position: absolute;
			margin-left: 30px;
		}