LESS 100％に達したときにプログレスバーの背景色を変更する方法

Question

こんにちは私はWebサイトを構築するにあたり、LESS、CSS、Javascript、およびHTMLを使い始めています。私は、要素の幅が100％であるかどうかを確認するためにLESSを使用することが可能かどうかと、背景色を変更することができるかどうか疑問に思っていました。進行状況バーが完了しているようです。 Javascriptを使用できない場合はどうすればいいですか？

.page-level-progress-menu-item-indicator-bar { 
     width:0%; 
     height:8px; 
     background-color:@primary-color; 
    } 

のJavascript機能：：私は例を使用してその文を定義する場所

updateProgressBar: function() { 
      if (this.model.get('completedChildrenAsPercentage')) { 
       var percentageOfCompleteComponents = this.model.get('completedChildrenAsPercentage'); 
      } else { 
       var percentageOfCompleteComponents = 0; 
      } 

      // Add percentage of completed components as an aria label attribute 
      this.$('.page-level-progress-menu-item-indicator-bar .aria-label').html(this.ariaText + Math.floor(percentageOfCompleteComponents) + '%'); 


     }, 

HTML：

<div class="page-level-progress-menu-item-indicator"> 
    <div id ="test" class="page-level-progress-menu-item-indicator-bar" style="width:{{completedChildrenAsPercentage}}%"><span class="aria-label" role="region" tabindex="0"></span></div> 
</div> 

Answer 1

LESSやCSSなどのタスクを実行するために構築されていません。 CSSルールは、ページが読み込まれる前に設定されます。あなたはjavascriptでそれをしなければなりません。

ここには簡単な例が記載されています。そのアイデアを使用するか、サンプル自体をパーソナライズすることができます。 CSSがどのように動作するか本当にないのです

var innerWidth = 0; 
 
var interval = setInterval(function() { 
 
    if($(".inner-progress").width() >= $(".progress-bar").width()) { 
 
    $(".inner-progress").addClass("completed"); 
 
    clearInterval(interval); 
 
    } else { 
 
    \t innerWidth = $(".inner-progress").width(); 
 
    innerWidth += $(".progress-bar").width()/100; 
 
    $(".inner-progress").width(innerWidth + "px"); 
 
    } 
 
}, 10);

.progress-bar, .inner-progress { 
 
    height: 30px; 
 
} 
 
.progress-bar { 
 
    background: grey; 
 
} 
 
.inner-progress { 
 
    background: red; 
 
    width: 10%; 
 
} 
 
.completed { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-bar"> 
 
    <div class="inner-progress"> 
 
    </div> 
 
</div>