<div class="Loader Fg-red Border" role="status">
      <div class="Square" *ngFor="let per of percentages"
           [style]="{'--ls-loader-per':per, '--ls-loader-status': '\''+per.toString()+'%'+'\''}">
        <div class="Centered">
          <span class="Loader-text"></span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
            <g>
              <path class="Loader-bg"
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
              <path class="Loader-fg"
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
            </g>
          </svg>
        </div>
      </div>
    </div>
  

    <div class="Loader Fg-purple Border" role="status">
      <div class="Square" *ngFor="let per of percentages" [style]="{'--ls-loader-per':per}">
        <div class="Centered">
          <span class="Loader-text" [attr.data-ls-status]="per+'%'"></span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
            <g transform="rotate(-90.1 17.9 17.9)">
              <circle class="Loader-bg" cx="17.9" cy="17.9" r="15.90"/>
              <circle class="Loader-fg" cx="17.9" cy="17.9" r="15.90"/>
            </g>
          </svg>
        </div>
      </div>
    </div>
  

    <div class="Loader Fg-purple Border" role="status">
      <div class="Square" *ngFor="let per of percentages" [style]="{'--ls-loader-per':per}">
        <div class="Centered">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
            <g transform="rotate(-90.1 17.9 17.9)">
              <circle class="Loader-bg" cx="17.9" cy="17.9" r="15.90"/>
              <circle class="Loader-fg" cx="17.9" cy="17.9" r="15.90"/>
            </g>
            <text class="Loader-text" x="50%" y="50%" font-size="60%">{/{per}/}%</text>
          </svg>
        </div>
      </div>
    </div>
  

    <div class="Loader Fg-purple Border">
      <!--        Hour-->
      <div class="Square" role="status" [style]="{'--ls-loader-per':(100/24*date.hour).toFixed(0)}">
        <div class="Centered">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
            <g>
              <path class="Loader-bg"
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
              <path class="Loader-fg"
                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
            </g>
            <text class="Loader-text" x="50%" y="50%" font-size="75%">{/{date.hour}/}</text>
            <text x="50%" y="75%" font-size="20%">Hour</text>
          </svg>
        </div>
      </div>
      <!--        Min-->
      <div class="Square Fg-yellow" role="status" [style]="{'--ls-loader-per':(100/60*date.min).toFixed(0)}">
        <div class="Centered">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
            <g transform="rotate(-90.1 17.9 17.9)">
              <circle class="Loader-bg" cx="17.9" cy="17.9" r="15.90"/>
              <circle class="Loader-fg" cx="17.9" cy="17.9" r="15.90"/>
            </g>
            <text class="Loader-text" x="50%" y="50%" font-size="75%">{/{date.min}/}</text>
            <text x="50%" y="75%" font-size="20%">Min</text>
          </svg>
        </div>
      </div>
      <!--        Sec-->
      <div class="Square Fg-orange" role="status" [style]="{'--ls-loader-per':(100/60*date.sec).toFixed(0)}">
        <div class="Centered">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
            <g transform="rotate(-90.1 17.9 17.9)">
              <circle class="Loader-bg" cx="17.9" cy="17.9" r="15.90"/>
              <circle class="Loader-fg" cx="17.9" cy="17.9" r="15.90"/>
            </g>
            <text class="Loader-text" x="50%" y="50%" font-size="75%">{/{date.sec}/}</text>
            <text x="50%" y="75%" font-size="20%">Sec</text>
          </svg>
        </div>
      </div>
    </div>
  

  timer: any;
  date = {    hour: 0,    min: 0,    sec: 0,  };

  ngOnInit(): void {
    this.timer = setInterval(() => {
      const d = new Date();
      this.date = {
        hour: d.getHours(),
        min: d.getMinutes(),
        sec: d.getSeconds(),
      };
    }, 1000);
  }

  ngOnDestroy(): void {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }