×
Жесткие переговоры 2.0, в пику Владимиру Соловьеву. Пранк :) (17 мая 2017)

Разговор программиста и работодателя.

Идея Preloader для Google Chart

Больше
2 мес. 2 нед. назад #1 от Aleksej
Aleksej создал эту тему: Preloader для Google Chart
Обещанный в статье блога Preloader для Google Chart скрипт, иллюстрирующий один из способов подключения прелоадера (spin.js):

<script src="spin.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
     var data = google.visualization.arrayToDataTable([
       ['Task', 'Hours per Day'],
       ['Work',     11],
       ['Eat',      2],
       ['Commute',  2],
       ['Watch TV', 2],
       ['Sleep',    7]
     ]);
     var options = {
       title: 'My Daily Activities'
     };
     var chart = new google.visualization.PieChart(document.getElementById('piechart'));
     chart.draw(data, options);
   }
</script>
<script type="text/javascript">
   window.onload = function ()
   { 
   var el = document.getElementById( 'spinnerarea' );
   el.parentNode.removeChild( el ); 
   }
</script>
<div id="spinnerarea"></div>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" charset="utf-8">
   var opts = {
     lines: 11 // The number of lines to draw
   , length: 12 // The length of each line
   , width: 3 // The line thickness
   , radius: 9 // The radius of the inner circle
   , scale: 0.5 // Scales overall size of the spinner
   , corners: 1 // Corner roundness (0..1)
   , color: '#000' // #rgb or #rrggbb or array of colors
   , opacity: 0.25 // Opacity of the lines
   , rotate: 0 // The rotation offset
   , direction: 1 // 1: clockwise, -1: counterclockwise
   , speed: 1 // Rounds per second
   , trail: 60 // Afterglow percentage
   , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
   , zIndex: 2e9 // The z-index (defaults to 2000000000)
   , className: 'spinner' // The CSS class to assign to the spinner
   , top: '50%' // Top position relative to parent
   , left: '50%' // Left position relative to parent
   , shadow: false // Whether to render a shadow
   , hwaccel: false // Whether to use hardware acceleration
   , position: 'absolute' // Element positioning
   }
   var target = document.getElementById('spinnerarea');
   var spinner = new Spinner(opts).spin(target); 
</script>

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.