プログレスバー Svelte コンポーネント

    Progressbar Svelte コンポーネントは、Progressbar要素を表します。

    プログレスバー コンポーネント

    以下のコンポーネントが含まれています。

    • Progressbar

    プログレスバーのプロパティ

    PropTypeDescription
    <Progressbar> properties
    progressnumber進捗状況の決定(0から100まで
    infinitebooleanプログレスバーが無限大であるかどうか(確定値

    プログレスバーのメソッド

    <Progressbar> methods
    .set(progress, duration)Set progressbar progress

    Examples

    <Page>
      <Navbar title="Progress Bar"></Navbar>
      <Block>
        <p>In addition to <a href="/preloader/">Preloader</a>, Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate some activity.</p>
      </Block>
      <BlockTitle>Determinate Progress Bar</BlockTitle>
      <Block strong>
        <p>When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable.</p>
        <p>Inline determinate progress bar:</p>
        <div>
          <p><Progressbar progress={10} id="demo-inline-progressbar"></Progressbar></p>
          <Segmented raised>
            <Button onClick={()=>{setInlineProgress(10)}}>10%</Button>
            <Button onClick={()=>{setInlineProgress(30)}}>30%</Button>
            <Button onClick={()=>{setInlineProgress(50)}}>50%</Button>
            <Button onClick={()=>{setInlineProgress(100)}}>100%</Button>
          </Segmented>
        </div>
        <div>
          <p>Inline determinate load & hide:</p>
          <p id="demo-determinate-container"></p>
          <p>
            <Button raised onClick={()=>{showDeterminate(true)}}>Start Loading</Button>
          </p>
        </div>
        <div>
          <p>Overlay with determinate progress bar on top of the app:</p>
          <p>
            <Button raised onClick={()=>{showDeterminate(false)}}>Start Loading</Button>
          </p>
        </div>
      </Block>
      <BlockTitle>Infinite Progress Bar</BlockTitle>
      <Block strong>
        <p>When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.</p>
        <p>Inline infinite progress bar</p>
        <p>
          <Progressbar infinite></Progressbar>
        </p>
        <p>Multi-color infinite progress bar</p>
        <p>
          <Progressbar infinite color="multi"></Progressbar>
        </p>
        <div>
          <p>Overlay with infinite progress bar on top of the app</p>
          <p id="demo-infinite-container"></p>
          <p>
            <Button raised onClick={()=>{showInfinite(false)}}>Start Loading</Button>
          </p>
        </div>
        <div>
          <p>Overlay with infinite multi-color progress bar on top of the app</p>
          <p>
            <Button raised onClick={()=>{showInfinite(true)}}>Start Loading</Button>
          </p>
        </div>
      </Block>
      <BlockTitle>Colors</BlockTitle>
      <List simpleList>
        <ListItem>
          <Progressbar color="blue" progress={10}></Progressbar>
        </ListItem>
        <ListItem>
          <Progressbar color="red" progress={20}></Progressbar>
        </ListItem>
        <ListItem>
          <Progressbar color="pink" progress={30}></Progressbar>
        </ListItem>
        <ListItem>
          <Progressbar color="green" progress={80}></Progressbar>
        </ListItem>
        <ListItem>
          <Progressbar color="yellow" progress={90}></Progressbar>
        </ListItem>
        <ListItem>
          <Progressbar color="orange" progress={100}></Progressbar>
        </ListItem>
      </List>
    </Page>
      
    
    <script>
      import {f7, Page, Navbar, Block, BlockTitle, Progressbar, Segmented, Button, List, ListItem} from 'framework7-svelte';
    
      let determinateLoading = false;
      let infiniteLoading = false;
    
      function setInlineProgress(value) {
        f7.progressbar.set('#demo-inline-progressbar', value);
      }
      function showDeterminate(inline) {
        if (determinateLoading) return;
        determinateLoading = true;
        let progressBarEl;
        if (inline) {
          progressBarEl = f7.progressbar.show('#demo-determinate-container', 0);
        } else {
          progressBarEl = f7.progressbar.show(0, f7.theme === 'md' ? 'yellow' : 'blue');
        }
        let progress = 0;
        function simulateLoading() {
          setTimeout(() => {
            const progressBefore = progress;
            progress += Math.random() * 20;
            f7.progressbar.set(progressBarEl, progress);
            if (progressBefore < 100) {
              simulateLoading(); // keep "loading"
            } else {
              determinateLoading = false;
              f7.progressbar.hide(progressBarEl); // hide
            }
          }, Math.random() * 200 + 200);
        }
        simulateLoading();
      }
      function showInfinite(multiColor) {
        if (infiniteLoading) return;
        infiniteLoading = true;
        if (multiColor) {
          f7.progressbar.show('multi');
        } else {
          f7.progressbar.show(f7.theme === 'md' ? 'yellow' : 'blue');
        }
        setTimeout(() => {
          infiniteLoading = false;
          f7.progressbar.hide();
        }, 3000);
      }
    </script>