Preloader / Spinner React Component

Preloader / Spinner React component represents Preloader element.

Preloader Components

There are following components included:

• **Preloader** / **F7Preloader**

Preloader Properties

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? Framework 7 has a nice one. The F7 Preloader is made with SVG and animated with CSS so it can be easily resized.</p>
11. </Block>

13. <BlockTitle>Default</BlockTitle>
14. <Block className="row demo-preloaders align-items-stretch text-align-center">
15. <Col>
16. <Preloader></Preloader>
17. </Col>
18. <Col style={{background: '#000'}}>
19. <Preloader color="white"></Preloader>
20. </Col>
21. <Col>
22. <Preloader size={42}></Preloader>
23. </Col>
24. <Col style={{background: '#000'}}>
25. <Preloader size={42} color="white"></Preloader>
26. </Col>
27. </Block>

29. <BlockTitle>Color Preloaders</BlockTitle>
30. <Block className="row text-align-center">
31. <Col>
32. <Preloader color="red"></Preloader>
33. </Col>
34. <Col>
35. <Preloader color="green"></Preloader>
36. </Col>
37. <Col>
38. <Preloader color="orange"></Preloader>
39. </Col>
40. <Col>
41. <Preloader color="blue"></Preloader>
42. </Col>
43. </Block>

45. <BlockTitle>Multi-color (MD-theme only)</BlockTitle>
46. <Block className="text-align-center">
47. <Preloader color="multi"></Preloader>
48. </Block>

50. <BlockTitle>Preloader Modals</BlockTitle>
51. <Block>
52. <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
53. <p>
54. <a className="button button-raised" onClick={this.openIndicator.bind(this)}>Open Small Indicator</a>
55. </p>
56. <p>With <b>app.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
57. <p>
58. <a className="button button-raised" onClick={this.openDialog.bind(this)}>Open Dialog Preloader</a>
59. </p>
60. <p>With <b>app.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
61. <p>
62. <a className="button button-raised" onClick={this.openCustomDialog.bind(this)}>Open Dialog Preloader</a>
63. </p>
64. </Block>
65. </Page>
66. );
67. }

69. openIndicator() {
70. const self = this;
71. self.$f7.preloader.show();
72. setTimeout(() => {
73. self.$f7.preloader.hide();
74. }, 2000);
75. }
76. openDialog() {
77. const self = this;
78. self.$f7.dialog.preloader();
79. setTimeout(() => {
80. self.$f7.dialog.close();
81. }, 2000);
82. }
83. openCustomDialog() {
84. const self = this;
85. self.$f7.dialog.preloader('My text...');
86. setTimeout(() => {
87. self.$f7.dialog.close();
88. }, 2000);
89. }
90. };