| 25423 | * @return {module:zrender/Element} |
| 25424 | */ |
| 25425 | var loadingDefault = function (api, opts) { |
| 25426 | opts = opts || {}; |
| 25427 | defaults(opts, { |
| 25428 | text: 'loading', |
| 25429 | textColor: '#000', |
| 25430 | fontSize: '12px', |
| 25431 | maskColor: 'rgba(255, 255, 255, 0.8)', |
| 25432 | showSpinner: true, |
| 25433 | color: '#c23531', |
| 25434 | spinnerRadius: 10, |
| 25435 | lineWidth: 5, |
| 25436 | zlevel: 0 |
| 25437 | }); |
| 25438 | var group = new Group(); |
| 25439 | var mask = new Rect({ |
| 25440 | style: { |
| 25441 | fill: opts.maskColor |
| 25442 | }, |
| 25443 | zlevel: opts.zlevel, |
| 25444 | z: 10000 |
| 25445 | }); |
| 25446 | group.add(mask); |
| 25447 | var font = opts.fontSize + ' sans-serif'; |
| 25448 | var labelRect = new Rect({ |
| 25449 | style: { |
| 25450 | fill: 'none', |
| 25451 | text: opts.text, |
| 25452 | font: font, |
| 25453 | textPosition: 'right', |
| 25454 | textDistance: 10, |
| 25455 | textFill: opts.textColor |
| 25456 | }, |
| 25457 | zlevel: opts.zlevel, |
| 25458 | z: 10001 |
| 25459 | }); |
| 25460 | group.add(labelRect); |
| 25461 | if (opts.showSpinner) { |
| 25462 | var arc = new Arc({ |
| 25463 | shape: { |
| 25464 | startAngle: -PI$1 / 2, |
| 25465 | endAngle: -PI$1 / 2 + 0.1, |
| 25466 | r: opts.spinnerRadius |
| 25467 | }, |
| 25468 | style: { |
| 25469 | stroke: opts.color, |
| 25470 | lineCap: 'round', |
| 25471 | lineWidth: opts.lineWidth |
| 25472 | }, |
| 25473 | zlevel: opts.zlevel, |
| 25474 | z: 10001 |
| 25475 | }); |
| 25476 | arc.animateShape(true) |
| 25477 | .when(1000, { |
| 25478 | endAngle: PI$1 * 3 / 2 |
| 25479 | }) |
| 25480 | .start('circularInOut'); |
| 25481 | arc.animateShape(true) |
| 25482 | .when(1000, { |