.progress{ width: 150px; height: 150px; line-height: 150px; background: none; margin: 0 auto; box-shadow: none; position: relative; overflow: visible; } .progress:after{ content: ""; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #fff; position: absolute; top: 0; left: 0; } .progress > span{ width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .progress .progress-left{ left: 0; } .progress .progress-bar{ width: 100%; height: 100%; background: none; border-width: 5px; border-style: solid; position: absolute; top: 0; } .progress .progress-left .progress-bar{ left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .progress .progress-right{ right: 0; } .progress .progress-right .progress-bar{ left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; animation: loading-1 1.8s linear forwards; } .progress .inner-circle, .progress .progress-value{ width: 60px; height: 60px; border-radius: 50%; border: 5px solid #8e8e8e; font-size: 18px; font-weight: bold; line-height: 50px; text-align: center; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .progress .inner-circle:after{ content: ""; width: 5px; height: 60px; background: #8e8e8e; margin: 0 auto; position: absolute; top: -60px; left: 0; right: 0; z-index: 2; transition: all 10s linear 0s; } .progress.blue .progress-bar{ border-color: #049dff; } .progress.blue .progress-value{ color: #049dff; } .progress.blue .progress-left .progress-bar{ animation: loading-2 1.5s linear forwards 1.8s; } .progress.blue .inner-circle{ animation: loading-6 3.8s ease forwards; } .progress.yellow .progress-bar{ border-color: #fdba04; } .progress.yellow .progress-value{ color: #fdba04; } .progress.yellow .progress-left .progress-bar{ animation: loading-3 1s linear forwards 1.8s; } .progress.yellow .inner-circle{ animation: loading-7 3.8s ease forwards; } .progress.pink .progress-bar{ border-color: #ed687c; } .progress.pink .progress-value{ color: #ed687c; } .progress.pink .progress-left .progress-bar{ animation: loading-4 0.4s linear forwards 1.8s; } .progress.pink .inner-circle{ animation: loading-8 3.8s ease forwards; } .progress.green .progress-bar{ border-color: #1abc9c; } .progress.green .progress-value{ color: #1abc9c; } .progress.green .progress-left .progress-bar{ animation: loading-5 1.2s linear forwards 1.8s; } .progress.green .inner-circle{ animation: loading-9 3.8s ease forwards; } @keyframes loading-1{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes loading-2{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(144deg); transform: rotate(144deg); } } @keyframes loading-3{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes loading-4{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(36deg); transform: rotate(36deg); } } @keyframes loading-5{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(126deg); transform: rotate(126deg); } } @keyframes loading-6{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100%{ -webkit-transform: rotate(324deg); transform: rotate(324deg); } } @keyframes loading-7{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100%{ -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @keyframes loading-8{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100%{ -webkit-transform: rotate(216deg); transform: rotate(216deg); } } @keyframes loading-9{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100%{ -webkit-transform: rotate(306deg); transform: rotate(306deg); } } @media only screen and (max-width: 990px){ .progress{ margin-bottom: 20px; } }

$(document).ready(function(){ $('.progress-value > span').each(function(){ $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 3500, easing: 'swing', step: function (now){ $(this).text(Math.ceil(now)); } }); }); });