Preloader - 图1

Preloader / Spinner React Component

Preloader / Spinner React component represents Preloader element.

Preloader Components

There are following components included:

  • Preloader / F7Preloader

Preloader Properties

PropTypeDescription
<Preloader> properties
sizestring
number
Size of the preloader in px

Examples

  1. export default class extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. }
  5. render() {
  6. return (
  7. <Page>
  8. <Navbar title="Preloader"></Navbar>
  9. <Block>
  10. <p>How about an activity indicator? Framework7 has a nice one. The F7 Preloader is made with SVG and animated with CSS so it can be easily resized.</p>
  11. </Block>
  12. <BlockTitle>Default</BlockTitle>
  13. <Block className="row demo-preloaders align-items-stretch text-align-center">
  14. <Col>
  15. <Preloader></Preloader>
  16. </Col>
  17. <Col style={{background: '#000'}}>
  18. <Preloader color="white"></Preloader>
  19. </Col>
  20. <Col>
  21. <Preloader size={42}></Preloader>
  22. </Col>
  23. <Col style={{background: '#000'}}>
  24. <Preloader size={42} color="white"></Preloader>
  25. </Col>
  26. </Block>
  27. <BlockTitle>Color Preloaders</BlockTitle>
  28. <Block className="row text-align-center">
  29. <Col>
  30. <Preloader color="red"></Preloader>
  31. </Col>
  32. <Col>
  33. <Preloader color="green"></Preloader>
  34. </Col>
  35. <Col>
  36. <Preloader color="orange"></Preloader>
  37. </Col>
  38. <Col>
  39. <Preloader color="blue"></Preloader>
  40. </Col>
  41. </Block>
  42. <BlockTitle>Multi-color (MD-theme only)</BlockTitle>
  43. <Block className="text-align-center">
  44. <Preloader color="multi"></Preloader>
  45. </Block>
  46. <BlockTitle>Preloader Modals</BlockTitle>
  47. <Block>
  48. <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
  49. <p>
  50. <a className="button button-raised" onClick={this.openIndicator.bind(this)}>Open Small Indicator</a>
  51. </p>
  52. <p>With <b>app.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
  53. <p>
  54. <a className="button button-raised" onClick={this.openDialog.bind(this)}>Open Dialog Preloader</a>
  55. </p>
  56. <p>With <b>app.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
  57. <p>
  58. <a className="button button-raised" onClick={this.openCustomDialog.bind(this)}>Open Dialog Preloader</a>
  59. </p>
  60. </Block>
  61. </Page>
  62. );
  63. }
  64. openIndicator() {
  65. const self = this;
  66. self.$f7.preloader.show();
  67. setTimeout(() => {
  68. self.$f7.preloader.hide();
  69. }, 2000);
  70. }
  71. openDialog() {
  72. const self = this;
  73. self.$f7.dialog.preloader();
  74. setTimeout(() => {
  75. self.$f7.dialog.close();
  76. }, 2000);
  77. }
  78. openCustomDialog() {
  79. const self = this;
  80. self.$f7.dialog.preloader('My text...');
  81. setTimeout(() => {
  82. self.$f7.dialog.close();
  83. }, 2000);
  84. }
  85. };

← Popup

Progressbar →