wq_progress v1.2.3

container

<div class="box">
  <div class="bg1"></div>
  <div class="bg2"></div>
  <div class="pr1"></div>
  <div class="pr2"></div>
  <div class="content"></div>
</div>

.content

.content {
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background:red;
  z-index: 5;
}

.bg1

.bg1{
  position: absolute;
  width: 60px;
  height: 120px;
  border-radius: 120px 0 0 120px;
  z-index: 3;
  background: sandybrown;
}

.bg2

.bg2{
  left: 60px;
  position: absolute;
  width: 60px;
  height: 120px;
  border-radius: 0px 120px 120px 0;
  z-index: 1;
  background: sandybrown;
}

.pr1

.pr1 {
  position: absolute;
  left: 60px;
  width: 60px;
  height: 120px;
  border-radius: 0px 120px 120px 0px;
  z-index: 2;
  background: forestgreen;
  transform: rotate(-180deg);
  transform-origin: 0px 60px;
}

.pr2

.pr2 {
  position: absolute;
  left: 60px;
  border-radius: 0px 120px 120px 0px;
  z-index: 4;
  background: forestgreen;
  transform: rotate(-180deg);
  transform-origin: 0px 60px;
}

render

rerender(baifenbi){
        try{
            if(baifenbi<0 || baifenbi > 1){return}
            let pr1 = document.querySelector(`#${this.options.id} .pr1`)
            let pr2 = document.querySelector(`#${this.options.id} .pr2`)
            if(baifenbi < 0.5){
                pr1.style.transform = `rotate(-${180-(180*baifenbi)*2}deg)`
            }else{
                pr1.style.transform = 'rotate(0deg)'
                pr2.style.width = `${this.options.bili * 60}px`
                pr2.style.height = `${this.options.bili * 120}px`
                pr2.style.transform = `rotate(${180*(baifenbi-0.5)*2}deg)`
            }
        }catch(e){
            console.log('请不要频繁刷新')
        } 
        
    }

course;

import { Wqprogress,MyPromise} from 'wq_progress'
let progress1 = new Wqprogress(document.querySelector('.progress_container'),{
                    width:200,
                    progressColor:'black'
                })

promise.all

MyPromise.all([prom1,prom2,prom3,prom4,prom5],(arr)=>{
    progress1.rerender(arr.length/5)
}).then((res)=>{
    console.log(res,'------')
})