Não entendi direito o objetivo final da pergunta, existem duas interpretações do que necessita

**1)** 
-
Gostaria que fosse uma barra de progresso pro conteúdo da pagina?

Se for isso mesmo: Podes usar `window.addEventListener('scroll', function() {` pegando o tamanho da tela do usuário (`var height = document.body.getBoundingClientRect().height - window.innerHeight;`) com a posição atual da tela (`var top = window.scrollY;`) para ir recalculando a porcentagem atual e recarregando o script `$('.circle').circleProgress({` com o valor da porcentagem.

Função adaptada desta outra: [progress-bar-when-scroll][1]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function updateProgress(num1, num2) {
      var percent = Math.ceil(num1 / num2 * 100);
      $('.circle').circleProgress({
        value: percent / 100,
        animation: false,
        fill: {color: '#0000ff'}
      })
    }

    window.addEventListener('scroll', function() {
      var top = window.scrollY;
      var height = document.body.getBoundingClientRect().height - window.innerHeight;
      updateProgress(top, height);
    });

<!-- language: lang-css -->

    .circle {
      margin: 6px 6px 20px;
      display: inline-block;
      position: relative;
      text-align: center;
      line-height: 1.2;
    }
    .circle strong {
      position: absolute;
      top: 51px;
      left: 0;
      width: 100%;
      text-align: center;
      line-height: 60px;
    }
    .circle strong i {
      font-style: normal;
      font-size: 1.4em;
      font-weight: 300;
    }
    .fixo {
      position: fixed!important;
      top: 0;
    }

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
    <div id="skills" class="container content center-align skill-progress">
      <div class="fixo">
        <div class="circle">
          <strong></strong>
        </div>
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>

<!-- end snippet -->

---
**2)** 
-
Gostaria que a animação iniciasse assim que chegar no elemento?

Pode fazer algo parecido: Ao iniciar a pagina chamar a função `$('.circle').circleProgress({` com `value: 0`, criar uma função que calcule qual a distancia do elemento levando em consideração a atual visualização da tela: 

    $(window).scroll(function() {
      var $circle = $(".circle");
      var window_offset = $circle.offset().top - $(window).scrollTop();
    });

E dentro desta função chamar outra função que se "alto destrua" quando ultrapassar um certo limite estipulado:

    var myFunction = function(window_offset) {
      if (window_offset < 100) {
        myFunction = function() {};

Dentro desse limite estipulado ainda chamar novamente a função `$('.circle').circleProgress({` com o valor da porcentagem que você gostaria.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $('.circle').circleProgress({
      value: 0,
      fill: {
        color: '#0000ff'
      }
    })

    var myFunction = function () {
        $(".circle").circleProgress({
          value: 0.85,
          fill: {
            color: '#0000ff'
          }
        });

        myFunction = function() {};
        return 1;
    };

    $(window).bind("scroll resize", function() {
      var $circle = $(".circle");
      var win = $(window);

      var isVibile = win.scrollTop() + win.height() > $circle.offset().top + $circle.outerHeight();

      $("#window_offset").html(isVibile ? "Visível" : "Invisível");

      if (isVibile) {
         myFunction($circle);
      }
    });

<!-- language: lang-css -->

    .circle {
      margin: 6px 6px 20px;
      display: inline-block;
      position: relative;
      text-align: center;
      line-height: 1.2;
    }
    .circle strong {
      position: absolute;
      top: 51px;
      left: 0;
      width: 100%;
      text-align: center;
      line-height: 60px;
    }
    .circle strong i {
      font-style: normal;
      font-size: 1.4em;
      font-weight: 300;
    }
    .fixo {
      position: fixed!important;
      top: 0px;
    }

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
    <div id="skills" class="container content center-align skill-progress">
      <br/>
      <br/>
      <label class="fixo" id="window_offset"></label>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <div class="circle">
        <strong></strong>
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>

<!-- end snippet -->

  [1]: http://stackoverflow.com/questions/31594698/progress-bar-when-scroll