Progress Bar Komponente

Question

Also ich habe eine Fortschrittsbalken-Komponente und wenn der Wert 100% erreicht, möchte ich die Farbe oder grün ändern. Dies wird unter Verwendung behandelt:
ng-class="{'progress-100': progress.value == 100}"

Aus meiner Sicht habe ich %atom-progressbar

Ich bin verwirrt, wie zu beurteilen, ob eine Klasse in Verbindung

Dies ist, was ich hinzufügen bisher haben:

app = angular.module('appname') 
 

 
pattern = 
 
    name: 'atomProgressbar' 
 

 
# ---------------------------------------------------------- # 
 
# Logo 
 

 
app.directive 'atomProgressbar', ($patterns, $atomicService) -> 
 
    template: """ 
 
    <progress ng-class="{'progress-100': progress.value == 100}" id='progress-bar' max='100' value='20'></progress> 
 
    """ 
 
    scope: $patterns.NGBindings(pattern.bindings) 
 
    link: ($scope) -> 
 
    $atomicService.processBindings(pattern, $scope) 
 

 

 

 
# EXAMPLE -> 
 
# %atom-progress{:max => "100", :value => "0"} 
 

 
export default pattern

// # ========= --- Progressbar Styles --- ========== # \\ 
 

 
atom-progressbar { 
 
    appearance: none !important; 
 
    width: 100%; 
 
    height: 40px; 
 
} 
 

 
progress { 
 
    appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    border: none; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: get-color('light-grey'); 
 
    width: 100%; 
 
} 
 

 
progress::-moz-progress-bar { 
 
    background-color: get-color('warning'); 
 
    width: 100%; 
 

 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: get-color('warning'); 
 
    transition: all .7s; 
 
} 
 

 
progress::-moz-progress-value { 
 
    background-color: get-color('warning'); 
 
    transition: all .7s; 
 
} 
 

 
.progress-100 { 
 
    background-color: forestgreen; 
 
    transition: all .5s; 
 
} 
 

 
.progress-100::-webkit-progress-value { 
 
    background-color: forestgreen; 
 
    transition: all .5s; 
 
} 
 

 
.progress-100::-moz-progress-value { 
 
    background-color: forestgreen; 
 
    transition: all .5s; 
 
}

%atom-progressbar

Answer 1

Ich habe Ihre Frage nicht richtig verstanden. Aber ich denke, dass Sie .alternate class in Ihrem Code verwenden können. zum Beispiel folgenden Code-Snippet betrachten.

if (progress === 0) { 
    progressbar.classList.toggle('alternate') 
    // ... 
} 

und dann können Sie die Farbe Ihrer Wahl einstellen.