Note: it takes about 10-15 minutes to read this article. If you find it interesting, please like it

Implementing a dynamic progress bar with native JS

The progress bar can be achieved with two divs, the code is as follows:

// The outer layer controls the background color and total width of the progress bar<div class="process-wrap">// The height of the inner layer is the same as that of the outer layer.<div class="process-bar"></div>
</div>
Copy the code
/* Progress bar */
.process-wrap {
    background-color: #ebebeb;
    border-radius: 2px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    height: 10px;
    /* Controls the total width of the outer layer */
    width: 70%;
    /* After the width is exceeded, hide to avoid overflow */
    max-width: 100%;
    overflow: hidden;
}
.process-bar {
    background-image: -webkit-linear-gradient(45deg, #2989d8 32%,#7db9e8 33%,#7db9e8 66%,#2989d8 67%);
    background-image: linear-gradient(45deg, #2989d8 32%,#7db9e8 33%,#7db9e8 66%,#2989d8 67%);
    background: #6088f2;
    background-size: 60px 10px;
    border-radius: 3px;
    height: 10px;
    /* Progress bar, use JS to change the current width */
    width: 0;
    /* Control animation */
    transition: width 1s ease-in;
    -moz-transition: width 1s ease-in; /* Firefox 4 */
    -webkit-transition: width 1s ease-in; /* Safari and Chrome */
    -o-transition: width 1s ease-in; /* Opera */
}
Copy the code
Original reference link

Knowledge 2: Transtion properties

Think about what would happen if we removed the transition from the progress bar?

The progress bar renders section by section, which is very obtrusive and user unfriendly. What magic does the Transition property use to make CSS work?

Meaning of the Transition property: Implements an implicit transitions between two states. This allows us to control the time, speed, effect, and so on when changing CSS properties.

Transition: Property duration durationFunc delayTime; // Transition: Property duration durationFunc delayTime;Copy the code

  • Property: Properties that can be animated, including width, height, background, backgorundImage, opacity, font, border, color, clip, etc.

  • Duration: Duration of the entire animation, in seconds.

  • DurationFunc: Animate variable path functions, ease, Linear, step-end, step(num, end), cubic.

  • DelayTime: Animation starts after a few seconds, in seconds.

If you want to do something after the Transition animation ends, use the transitionEnd event (triggered after the Transition animation ends)

  • Compatible with Internet Explorer 10 or later
  • In WebKit, the webkitTransitionEnd event
  • In Firefox, it is the mozTransitionEnd event
  • Under Opera, is the oTransitionEnd event
element.addEventListener('transitionend', callbackFunc, true);
Copy the code

3

  • Example 1 – Multiple properties moving together
<div class="multi-box"></div>
Copy the code
.multi-box {
    display: block;
    border: 1px solid # 000;
    width: 100px;
    height: 100px;
    background-color: #2989d8;
    -webkit-transition: width 2s, height 4s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 4s, background-color 2s, transform 2s;
}
.multi-box:hover {
    background-color: antiquewhite;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
Copy the code
  • Example 2 – Highlight menu transitions
<div class="sidebar">
    <p><a class="menuButton" href="home">Home</a></p>
    <p><a class="menuButton" href="about">About</a></p>
    <p><a class="menuButton" href="contact">Contact</a></p>
    <p><a class="menuButton" href="links">Links</a></p>
</div>
Copy the code
.menuButton {
    display: block;
    margin-bottom: 10px;
    height: 26px;
    width: 100px;
    text-align: center;
    border: 1px solid black;
    font-size: 20px;
    text-decoration: none;
    padding: 2px 4px;

    /* Change the attribute: hover leave hu, restore the original state animation */
    color: white;
    background-color: grey;
    transition: background-color 1s, color 1s;
}
.menuButton:hover {

    /* Change attribute: hover animation */
    color: black;
    background-color: white;
    transition: background-color 1s, color 1s;
}
Copy the code
  • Example 3 – After the transition effect is complete, pop-up content
// Go to example 2let animationBtn = document.querySelectorAll('.menuButton');
animationBtn.forEach(item => {
    item.addEventListener('webkitTransitionEnd', () => {
        console.log('Animation is over! ');
    }, true);
});
Copy the code

Hover after leaving, it will find 4 output, because two of the hover properties have changed (background-color, color), and two of the properties have changed after leaving the original soil.

  • Example 4 — Click somewhere to move the sphere
<div id="foo"></div>
Copy the code
#foo {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background:#c00;
    top: 0;
    left: 0;
    -moz-transition: all 1s; 
    -webkit-transition: all 1s;  
    -ms-transition: all 1s;  
    -o-transition: all 1s;  
    transition: all 1s;  
}
Copy the code
var f = document.getElementById('foo');
document.addEventListener('click'.function(ev){
    f.style.left = (ev.clientX- 25) +'px';
    f.style.top = (ev.clientY- 25) +'px';
},false);    
Copy the code