Preloader / Spinner Svelte Component

Preloader / Spinner Svelte component represents Preloader element.

Preloader Components

There are following components included:

• Preloader

Preloader Properties

Examples

1. <Page>
2. <Navbar title="Preloader" />

4. <Block>
5. <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>
6. </Block>

8. <BlockTitle>Default</BlockTitle>
9. <Block strong class="row demo-preloaders align-items-stretch text-align-center">
10. <Col>
11. <Preloader></Preloader>
12. </Col>
13. <Col style="background: #000">
14. <Preloader color="white"></Preloader>
15. </Col>
16. <Col>
17. <Preloader size={42}></Preloader>
18. </Col>
19. <Col style="background: #000">
20. <Preloader size={42} color="white"></Preloader>
21. </Col>
22. </Block>

24. <BlockTitle>Color Preloaders</BlockTitle>
25. <Block strong class="row text-align-center">
26. <Col>
27. <Preloader color="red"></Preloader>
28. </Col>
29. <Col>
30. <Preloader color="green"></Preloader>
31. </Col>
32. <Col>
33. <Preloader color="orange"></Preloader>
34. </Col>
35. <Col>
36. <Preloader color="blue"></Preloader>
37. </Col>
38. </Block>

40. <BlockTitle>Multi-color (MD-theme only)</BlockTitle>
41. <Block strong class="text-align-center">
42. <Preloader color="multi"></Preloader>
43. </Block>

45. <BlockTitle>Preloader Modals</BlockTitle>
46. <Block strong>
47. <p>With <b>f7.preloader.show()</b> you can show small overlay with preloader indicator.</p>
48. <p>
49. <Button fill onClick={openIndicator}>Open Small Indicator</Button>
50. </p>
51. <p>With <b>f7.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
52. <p>
53. <Button fill onClick={openDialog}>Open Dialog Preloader</Button>
54. </p>
55. <p>With <b>f7.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
56. <p>
57. <Button fill onClick={openCustomDialog}>Open Dialog Preloader</Button>
58. </p>
59. </Block>
60. </Page>

64. <style>
65. :global(.demo-preloaders .col) {
66. line-height: 42px;
67. }
68. </style>

70. <script>
71. import {f7, Page, Navbar, Block, BlockTitle, Col, Preloader, Button} from 'framework7-svelte';

73. function openIndicator() {
74. f7.preloader.show();
75. setTimeout(() => {
76. f7.preloader.hide();
77. }, 2000);
78. }
79. function openDialog() {
80. f7.dialog.preloader();
81. setTimeout(() => {
82. f7.dialog.close();
83. }, 2000);
84. }
85. function openCustomDialog() {
86. f7.dialog.preloader('My text...');
87. setTimeout(() => {
88. f7.dialog.close();
89. }, 2000);
90. }
91. </script>

← Popup

Progressbar →