Null Pointer Micromanagement

    putz

    1.0.1 • Public • Published

    putz

    A super-small progress bar with a full API and the ability to putz: increment randomly to simulate loading events. 599b gzipped.

    js-standard-style

    Install

    npm i putz --save
    

    Usage

    import putz from 'putz'
     
    /**
     * Default
     *
     * Inserts loader as first child of
     * document.body, with default options
     */
    const loader = putz()
     
    /**
     * With options
     */
    const loader = putz(document.getElementById('header'), {
      classname: 'putz',
      speed: 200,
      trickle: 5
    })
     
    // Start loading
    loader.start()
     
    // Randomly increment
    loader.inc()
     
    // Increment by 15
    loader.inc(15)
     
    // Go to 50%
    loader.go(50)
     
    // Randomly increment every 100ms
    loader.putz(100)
     
    // Go to 100% and hide
    loader.end()
     
    // Remove bar from DOM
    loader.destroy()

    Recommended CSS

    Replace putz here with the classname you passed to the classname option, and replace transition speed with the value passed to the speed option.

    .putz {
      position: fixed;
      width: 100%;
      left: 0; top: 0;
      z-index: 1000;
    }
    .putz__inner {
      position: absolute;
      width: 100%;
      left: 0; top: 0;
      height: 2px;
      background-color: #00C9FC;
      transition: transform 200ms ease-in-out; 
      transform: translateX(-100%);
    }

    Related Projects

    MIT License

    Keywords

    none

    Install

    npm i putz

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • estrattonbailey