Показать сообщение отдельно
  #13 (permalink)  
Старый 03.12.2017, 09:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

radialIndicator and viewportchecker
assistant5599,
в теме есть примеры, у плагинов есть документация ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">p{
    height: 1000px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
  <script src="https://apollowebstudio.com/labs/js/sugarcrm-pm/js/radialIndicator.min.js"></script>
  <script>
$(function() {
$('#indicatorContainer').radialIndicator({ frameTime : 120,
  barColor: '#87CEEB',
  barWidth: 7,
  radius: 90, // width of circle
  initValue: 40,
  roundCorner: true,
  percentage: true
});

// Getting instance of radial Progress
var radialObj = $('#indicatorContainer').data('radialIndicator');
//now you can use instance to call different method on the radial progress.
//like

$('#indicatorContainer').viewportChecker({
        callbackFunction: function(elem, action){  
        radialObj.animate(60);
  }
});


});
  </script>
</head>

<body> <p></p>
<div class="" id="indicatorContainer"></div>
       <p></p>
</body>
</html>
Ответить с цитированием