life-diary/public/comp/ld-progress.html

Life Diary ❤️ your albums, your journey, your data

<style>
  ld-progress {
    display: block;
    width: 100%;
    padding: 4px;
  }
</style>

<style scoped>
  progress {
    width: 100%;
  }
  small {
    display: block;
    text-align: center;
    opacity: .7;
  }
</style>

<ld-progress>
  <progress max={{this.max}} value={{this.value}}></progress>
  <small><code>{{this.spinner}}</code> {{this.details}}</small>
</ld-progress>

<script type="module" setup="props">

  /**
   * ISC License
   *
   * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
   *
   * Permission to use, copy, modify, and/or distribute this software for any
   * purpose with or without fee is hereby granted, provided that the above
   * copyright notice and this permission notice appear in all copies.
   *
   * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
   * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
   * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
   * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
   * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
   * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   * PERFORMANCE OF THIS SOFTWARE.
   *
   */

  export const props = {
    max: this.max || 1,
    value: this.value || 0,
    details: this.details || '',
    spinner: this.spinner || ''
  };
</script>