Pattern Library by Cloudy knot

Progress Bar 

<main class="main-wrapper ">
    <h2 class="heading2">Progress bar for loading status (Under development)</h2>
    <div class="progress-wrapper" aria-live="polite">
        <div id="progresslabel" class="progress-label">0%</div>
        <div class="progress-container">
            <div class="progress-frame">
                <div class="progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-labelledby="progresslabel"></div>
            </div>
        </div>
    </div>
</main>
 
<main class="main-wrapper ">
  <h2 class="heading2">Progress bar for loading status (Under development)</h2>
  <div class="progress-wrapper" aria-live="polite">
    <div id="progresslabel" class="progress-label">0%</div>
    <div class="progress-container">
      <div class="progress-frame">
        <div
          class="progressbar"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-labelledby="progresslabel"
        ></div>
      </div>
    </div>
  </div>
</main>
 
/* No context defined. */
  • Content: 
    .progress-label {
  display: block;
  margin: auto auto 8px auto;
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: center;
}

.progress-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
  height: 34px;
  padding-right: 5px;
  padding-left: 5px;
  background-color: hsla(0deg, 0%, 47%, 0.75);
}

.progressbar {
  width: 0;
  height: 76%;
  position: relative;
  background-size: 1.5rem 1.5rem;
  background-color: hsl(229deg, 73%, 19%);
  text-decoration: none;
  outline: none;
  overflow: hidden;
  -webkit-animation: progress 2s var(--ease-in-quad) 1 forwards;
  animation: progress 2s var(--ease-in-quad) 1 forwards;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@-webkit-keyframes progress {
  0% {
    width: 0;
    background-position: 0 0;
  }
  2% {
    width: 2%; /* border-radius: 20px 0 0 20px; */
  }
  to {
    width: 100%; /* border-radius: 20px; */
    background-position: 0px 90px;
  }
}
@keyframes progress {
  0% {
    width: 0;
    background-position: 0 0;
  }
  2% {
    width: 2%; /* border-radius: 20px 0 0 20px; */
  }
  to {
    width: 100%; /* border-radius: 20px; */
    background-position: 0px 90px;
  }
}
  • URL: /components/raw/progress-bar/style.css
  • Filesystem Path: src/components/5-effect/progress-bar/style.css
  • Size: 1.2 KB

No notes defined.