Skip to content

Latest commit

 

History

History
236 lines (168 loc) · 3.51 KB

readme-en.md

File metadata and controls

236 lines (168 loc) · 3.51 KB
Raw

AnyProgress

The progress bar at HTML Element top.

中文 | english

Install

npm i any-progress -S

Usage

  • ES Module
import AnyProgress from 'any-progress';

const ap = new AnyProgress();

ap.start();

setTimeout(() => {
  ap.done();
}, 2000);
  • Browser
<script src="any-progress.js"></script>

<script>
  new AnyProgress().start();  
</script>

Q & A

  • The el configuration item is provided, but not available.

Check the CSS properties of the element. Position need relative、absolute or fixed.

  • There is sth log in console panel.

ver1.4.2 is not remove the debug log before update, use the new version(>1.4.2)

Support

Vue

import any-progress at the entrance, then mount on the prototype.

import AnyProgress from 'any-progress';

Vue.prototype.$progress = AnyProgress;

If use typescrit, remember to extension the type.

declare module 'vue/types/vue' {
  interface Vue {
    // ....
  }
}

Details

Constructor

arguments

new AnyProgress({
  // bar color
  color?: string = 'blue',
  // z-index
  zIndex?: number = 100,
  // shadow
  shadow?: string = 'l2',
  // height
  height?: string = '3px',
  // custom css, use js-style
  style?: { [propName: string]: any } = {},
  // target element
  el?: string = 'body',
});

color and shadow have default values can be used.

  • color
blue: '#2196f3',
pink: '#e91e63',
purple: '#9c27b0',
red: '#f44336',
teal: '#009688',
green: '#4caf50',
black: '#000000',
white: '#ffffff',
new AnyProgress({
  color: 'pink',
});

new AnyProgress({
  color: '#fafafa',
});
  • shadow
l0: '',
l1: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)',
l2: '0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)',
l3: '0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12)',
l4: '0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)',
l5: '0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12)',
new AnyProgress({
  shadow: 'l4',
});

new AnyProgress({
  shadow: '1px 2px 5px rgba(0, 0, 0, .1)',
});

start

The progress bar starts moving

new AnyProgress().start();

done

The progress bar goes to 100% and fades out, then progress will remove from DOM.

new AnyProgress().done();

new AnyProgress().done(() => {
  console.log('done');
});

finish

The progress bar goes to 100%, but it still shows up

new AnyProgress().done();

setTimeout(() => {
  ap.finish();
}, 1000);

pause

new AnyProgress().done();

setTimeout(() => {
  ap.pause();
}, 1000);

fadeOut

const ap = new AnyProgress().start();

setTimeout(() => {
  ap.pause();

  setTimeout(() => {
    ap.fadeOut(() => {
      console.log('after fadeout!')
    });
  }, 1000);
}, 2000);

stop

const ap = new AnyProgress().start();

setTimeout(() => {
  ap.stop();
}, 1000);

remove

remove from DOM

const ap = new AnyProgress().start();

setTimeout(() => {
  ap.done(() => {
    ap.remove();
  });
}, 1000);

end

It same like done, but will not be remove from DOM when fade outed.

new AnyProgress().start();

setTimeout(() => {
  ap.end(() => {
    console.log('end');
  });
}, 1000);