arrow_back
View code

<div class="smart-progress-bar width-60 margin-x-auto margin-top-lg">
  <img src="/assets/images/3a.jpg" alt="">
</div>
                        
Copy HTML

/*
 * File: _smart-progress-bar.scss
 * Location /src/scss/components
 * Smart progress bar component
 */

.smart-progress-bar img {
  width: 100%;
}

                        
Copy SCSS

/*
 * File: smart-progress-bar.js
 * Location /src/js/components
 * Smart progress bar component
*/

class SmartProgressbar {
  constructor(options) {
    this.stroke = options.color || "#000";
    this.strokeWidth = options.thickness || 3;
    this.duration = options.duration || 2;
    this.width = options.width || 200;
    this.height = options.height || 200;
    this.left = options.left || 0;
    this.top = options.top || 0;
    this.progressbar = null;
    this.svg = null;
  }
  setElement(item, duration) {
    if (duration) this.duration = duration;

    const boundingRect = item.getBoundingClientRect();
    this.width = boundingRect.width;
    this.height = boundingRect.height;
    this.left = boundingRect.left;
    this.top = boundingRect.top;
    if (!this.svg) {
      this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    } else {
      this.svg.classList.remove("hide");
      this.svg.querySelector("path").remove();
    }
    this.svg.setAttribute("width", this.width);
    this.svg.setAttribute("height", this.height);
    this.svg.classList.add("kh-smart-progress-bar");
    this.svg.style.top = `${this.top}px`;
    this.svg.style.left = `${this.left}px`;
    this.svg.style.zIndex = 10;
    this.svg.style.position = "absolute";
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute(
      "d",
      `M0,0 L${this.width},0 L${this.width},${this.height} L0,${this.height} Z`
    );
    // path.setAttribute('stroke', this.stroke);
    path.style.stroke = this.stroke;
    path.setAttribute("fill", "none");
    path.setAttribute("stroke-width", this.strokeWidth);
    this.svg.appendChild(path);
    document.body.appendChild(this.svg);

    this.progressbar = new Moveit(path, {
      start: "0%",
      end: "0%"
    });
  }
  start() {
    const context = this;
    this.progressbar.set({
      start: "0%",
      end: "100%",
      duration: this.duration,
      callback: function () {
        context.svg.classList.add("hide");
        window.dispatchEvent(new CustomEvent("progress-complete"));
      }
    });
  }
}
const smartProgressbar = new SmartProgressbar({
  color: "var(--primary-color)",
  thickness: 15,
  duration: 10
});
smartProgressbar.setElement(document.querySelector(".smart-progress-bar"));

const image = document
  .querySelector(".smart-progress-bar")
  .querySelector("img");
if (image.complete && image.naturalHeight !== 0) {
  console.log('loaded1');
  smartProgressbar.start();
  
} else {
  image.addEventListener("load", () => { smartProgressbar.start();console.log('loaded1');});
}

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.