Chart loading progress animation
by LeeMellinger
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="k-content">
<div id="loading"></div>
<div id="chart"></div>
</div>
CSS
#connection {
font-size: 1.3em;
color: red;
}
JavaScript
$("#chart").kendoChart({
dataSource: {
transport: {
read: function (op) {
setTimeout(function () {
op.success([{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
}, {
"country": "Spain",
"year": "2007",
"unit": "GWh",
"solar": 508,
"hydro": 30522,
"wind": 27568,
"nuclear": 55103
}, {
"country": "Spain",
"year": "2006",
"unit": "GWh",
"solar": 119,
"hydro": 29831,
"wind": 23297,
"nuclear": 60126
}, {
"country": "Spain",
"year": "2005",
"unit": "GWh",
"solar": 41,
"hydro": 23025,
"wind": 21176,
"nuclear": 57539
}, {
"country": "Spain",
...