.position { float: left; margin: 100px 50px; }

.progress-bar { position: relative; height: 56px; width: 56px; }
.progress-bar div { position: absolute; height: 56px; width: 56px; border-radius: 50%; }
.progress-bar div span { position: absolute; font-family: Arial; font-size: 14px; line-height: 42px; height: 42px; width: 42px; left: 7px; top: 7px; text-align: center; border-radius: 50%; background-color: white; }
.progress-bar .background { background-color: #b3cef6; }
.progress-bar .rotate { clip: rect(0 28px 56px 0); background-color: #4b86db; }
.progress-bar .left { clip: rect(0 28px 56px 0); opacity: 1; background-color: #b3cef6; }
.progress-bar .right { clip: rect(0 28px 56px 0); transform: rotate(180deg); opacity: 0; background-color: #4b86db; }

.progress-bar { position: relative; height: 47px; width: 47px; }
.progress-bar.no-active > div { background-color: #FFF; }
.progress-bar.no-active div { position: absolute; height: 47px; width: 47px; border-radius: 50%; }
.progress-bar.no-active div span { position: absolute; font-family: Arial; font-size: 11.75px; line-height: 35.25px; height: 35.25px; width: 35.25px; left: 5.875px; top: 5.875px; text-align: center; border-radius: 50%; background-color: white; }
.progress-bar.no-active .background { background-color: #b3cef6; }
.progress-bar.no-active .rotate { clip: rect(0 23.5px 47px 0); background-color: #4b86db; }
.progress-bar.no-active .left { clip: rect(0 23.5px 47px 0); opacity: 1; background-color: #b3cef6; }
.progress-bar.no-active .right { clip: rect(0 23.5px 47px 0); transform: rotate(180deg); opacity: 0; background-color: #4b86db; }

@keyframes toggle { 0% { opacity: 0; }
  100% { opacity: 1; } }