.position {
   float: left;
   margin: 100px 20px;
 }
 .progress-bar {
   position: relative;
   height: 175px;
   width: 175px;
 }
 .progress-bar div {
   position: absolute;
   height: 175px;
   width: 175px;
   border-radius: 50%;
 }
 .progress-bar div span {
   position: absolute;
   font-family: "druk-medium";
   font-style: normal;
   font-weight: 500;
   font-size: 2.5rem;
   line-height: 150px;
   height: 150px;
   width: 150px;
   left: 12.5px;
   top: 12.5px;
   text-align: center;
   border-radius: 50%;
   background-color: white;
 }
 .progress-bar .background {
   background-color: #000;
 }
 .progress-bar .rotate {
   clip: rect(0 87px 175px 0);
   background-color: #000;
 }
 .progress-bar .left {
   clip: rect(0 87px 175px 0);
   opacity: 1;
   background-color: #000;
 }
 .progress-bar .right {
   clip: rect(0 87px 175px 0);
   transform: rotate(180deg);
   opacity: 0;
   background-color: #000;
 }
 @keyframes toggle {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }