Basic progress bar

Question

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I'm reaching out for your assistance. Thank you!

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  /*background: repeating-linear-graient (90deg, blue, red, 100px);*/
  background: linear-gradient(to left, blue, red);
  animation-name: download;
  animation-direction: 10s;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

<div class="Download">
</div>

css html

Answer 1

Answer №1

If you want to achieve this, consider using pseudo code examples.

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.Download:after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to left, blue, red);
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  animation: download 5s;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

<div class="Download">
</div>

Answer 2

If you want to achieve this, consider using pseudo code examples.

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.Download:after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to left, blue, red);
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  animation: download 5s;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

<div class="Download">
</div>

Answer 3

Answer №2

To create a unique effect, try making half of the linear gradient transparent to avoid any gaps at the end. Adjust the background position x to 100% in order to display only the transparent portion. Finally, set up an animation that moves back to 0:

.CustomBox {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  background: linear-gradient(to right, red 0, blue 50.02%, transparent 50.02%) no-repeat;
  animation: slideIn 10s forwards;
  background-position: 100% 0;
  background-size: 200% 100%;
}

@keyframes slideIn {
  to {
    background-position: 0 0;
  }
}

<div class="CustomBox">
</div>

Answer 4

To create a unique effect, try making half of the linear gradient transparent to avoid any gaps at the end. Adjust the background position x to 100% in order to display only the transparent portion. Finally, set up an animation that moves back to 0:

.CustomBox {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  background: linear-gradient(to right, red 0, blue 50.02%, transparent 50.02%) no-repeat;
  animation: slideIn 10s forwards;
  background-position: 100% 0;
  background-size: 200% 100%;
}

@keyframes slideIn {
  to {
    background-position: 0 0;
  }
}

<div class="CustomBox">
</div>

Basic progress bar

Answer №1

Answer №2

Similar questions

Python allows for the retrieval of the aria-label attribute as text based on the div id with the help of libraries like Beautiful Soup

An HTML button generated by a .js file is able to execute a .js function without any issues, but it inadvertently removes all .css styling

Creating a scrollable HTML5 div container with fixed divs positioned within it

Reserved space for both double and single quotation marks

Analyze HTML while maintaining the integrity of the initial content

Press the button to automatically scroll to a designated div section

Ways to activate jQuery validation when submitting a form instead of triggering it on blur

AngularJS options for selecting items: radio buttons and checkboxes

Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

Steps for reverting a widget's background color to its default state following the utilization of gtk_css_provider_load_from_data()

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Error with AngularJS: IE not showing dropdown options for MultiSelect

Expanding an element to cover all columns in a grid with automatically generated columns

The search bar fails to display all pertinent results when only a single letter is inputted

What steps should I take to fix the "loading page" issue in VS2010?

Blurry font rendering occurs when an element is scaled using CSS

What is the process for inserting an image into a table using el-table and el-table-column components in Vue.js while utilizing ui-elements?

Is there a way for me to implement my custom CSS design within the Material UI Textfield component?

The image displayed on the HTML scrset attribute is not the correct one

Creating Repeating nth-child Patterns with CSS