animation on progressbar

Carpenteri1 · Apr 3, 2024 · 83f04b4 · 83f04b4
1 parent c62f09e
commit 83f04b4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 10 deletions.
diff --git a/src/app/component/carouselcomponent/carousel.component.css b/src/app/component/carouselcomponent/carousel.component.css
@@ -4,7 +4,6 @@
 
 .progress-loaded{
   background-color: #313d4b;
-  border:0.5px solid black;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   height:18px;
@@ -18,6 +17,65 @@
   padding-left: 1em;
   color: black !important;
 }
+
+.skill-main {
+  width: 100%;
+  max-width: 600px;
+  display: flex;
+  align-self:normal;
+  flex-direction: column;
+  gap: 20px;
+}
+  .skill-wrrap {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 2.5em;
+  }
+    .skill-name {
+      color: #ffffff;
+      font-size: 12x;
+      padding-left: 10px;
+    }
+
+    .skill-bar {
+      height: 20px;
+      background-color: #00283a;
+      border-radius: 8px;
+    }
+
+    .skill-per {
+      height: 20px;
+      background: #23576f;
+      border-radius: 8px;
+      width: 0;
+      transition: 1s linear;
+      position: relative;
+      &:before {
+        content: attr(per);
+        position: absolute;
+        padding: 4px 6px;
+        background-color: #23576f;
+        color: #fff;
+        font-size: 11px;
+        border-radius: 4px;
+        top: -35px;
+        right: 0;
+        transform: translateX(50%);
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background-color: #23576f ;
+        top: -20px;
+        right: 0;
+        transform: translateX(50%) rotate(45deg);
+        border-radius: 2px;
+      }
+    }
 /*  
 @media only screen and (max-width: 835px),
 screen and (max-height: 520px) {

diff --git a/src/app/component/carouselcomponent/carousel.component.html b/src/app/component/carouselcomponent/carousel.component.html
@@ -4,21 +4,21 @@
         <h2>{{title}}</h2>
     </div>
     <div class="row pt-4 d-flex align-items-center">
-        <div class="col-1">
+        <div class="col-2">
             <button class="no-outline" (click)="toggleGroup('left')"><i class="bi bi-arrow-left"></i></button>
         </div>
-            <div class="col-10">
-                <div *ngFor="let item of currentListOfSKills" @fade [@fadeOut]="fadeIn ? null : true" (@fadeOut.done)="fadeOutDone($event)" [@fadeIn]="fadeIn">
-                    <div class="row" style="margin-top: 1em;" >
-                        <div class="progress">
-                            <div class="col-2 d-flex align-items-center" style="background-color: #2E3445;border:2px solid black;">
-                                <p class="pt-3 progress-text">{{item.name}} {{item.level}}%</p>
-                            </div>
-                            <div class="progress-loaded col-10" style="background-color:#b29600;width:{{item.level-12}}%;"></div>
+        <div class="col-9">
+            <div *ngFor="let item of currentListOfSKills" @fade [@fadeOut]="fadeIn ? null : true" (@fadeOut.done)="fadeOutDone($event)" [@fadeIn]="fadeIn">
+                <div class="skill-main">
+                    <div class="skill-wrrap">
+                        <div class="skill-bar" style="position: relative;">
+                            <div class="skill-name" style="position: absolute; z-index: 1;">{{item.name}}</div>
+                            <div class="skill-per" style="background-color: #b29600; width:{{item.level}}%;" [attr.per]="item.level"></div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
         <div class="col-1">
             <button class="no-outline" (click)="toggleGroup('right')"><i class="bi bi-arrow-right"></i></button>
         </div>