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>

csshtml

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a clickable navigation menu item with a clickable caret located on the same line

I've been developing a solution using Twitter Bootstrap to create a main navigation menu that expands upon hover on desktop, while the menu expands when clicking the caret on mobile (caret hidden on desktop). Additionally, I aimed to make the top-leve ...

csstwitter-bootstrap

Issues with React JS and JavaScript filtering functionality not working correctly

I've been working on implementing a filter feature for a website, using an HTML range slider. However, I've encountered an issue where the values only update correctly when decreasing. For example, if I set the slider to $500, only products that ...

javascripthtmlreactjs

Navigating Back to the Previous Page After Accepting an Alert Popup in Selenium

My testing process involves using Selenium with Python on a test page. Here is what happens during the test: First, I have page A open and then I click on a link that triggers the opening of page B. Upon submitting a form on page B, an alert popup ap ...

pythonhtmlseleniumwebdriverautomated-tests

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

javascriptjquerycssprogress-barprogress

What is the best way to embed sections of one HTML page into another page?

Is there a method I can use to embed sections of one webpage within another webpage? The dilemma arises from the fact that the second page has a distinct style compared to my main page. Is it feasible to apply the alternate style solely to specific content ...

javascriptphphtmlcss

The alert box fails to display in the correct orientation when the condition is activated

Currently, I am working on implementing a sign-up feature using PHP. My main goal is to successfully store the user-entered data in MySQL database while ensuring that no duplicate usernames are allowed during account creation. Although everything is functi ...

javascriptphphtml

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

Struggling with adding a border to an HTML table?

I am attempting to create a table with alternating borders on the cells. After trying the code below, I still can't seem to get the desired effect. The borders are not showing up at all. Can someone provide guidance on how to achieve this? <style ...

htmlcsshtml-table

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

javascripthtmlcss

Convince me otherwise: Utilizing a Sinatra API paired with a comprehensive JS/HTML frontend

As I embark on the journey of designing a social website that needs to support a large number of users, I have come up with an interesting approach: Implementing Sinatra on the backend with a comprehensive REST API to handle all operations on the website ...

javascripthtmlrubysinatraweb

Looking to display several charts on a single page with varying datasets?

I have successfully integrated a doughnut chart plugin into my website. However, I would like to display multiple charts on the same page with different data sets. Below is the code snippet for the current chart being used: This is the chart I am using & ...

javascripthtmlcsschartschart.js

What is the best way to navigate through an XML document within the DOM of an HTML

I am facing an issue with HTML code. My goal is to navigate through an XML document directly from within the HTML code. Here is the XML code: <?xml version = "1.0"?> <planner> <year value = "2000"> <date month = "7" day = " ...

javascripthtmlxmldom

Tips for centering the search popup in jqgrid

Having trouble centering the Search popup in my jqgrid. Every time I click on the search button in jqgrid, the Search popup appears at the beginning of the grid. $(document).ready(function(){ //jqGrid $("#usersList").jqGrid({ ...

jquerycssjqgrid

enhance the brilliance of elements at different intervals

My latest CSS animation project involves creating a stunning 'shine' effect on elements with a specific class. The shine effect itself is flawless, but having all elements shine simultaneously is making it look somewhat artificial. I've bee ...

htmlcssanimation

Styling images side by side with CSS in Internet Explorer

I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...

cssinternet-explorer-7

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

javascripthtmljsonreactjssearchkit

Incorporating accordion functionality using jQuery within my Model-View-Controller

Struggling to integrate accordion jquery with my MVC view. I want it to show content when @item["name"] is selected, but currently it's not working. Here is the script I'm using: <script> $(function () { $("#parameter_accordion").acco ...

jqueryhtmlasp.net-mvc

Utilizing cheerio to set outerHTML in HTML

Could someone kindly assist me with setting the outerHTML of an element using cheerio? I seem to be encountering some issues with this process. For example, let's consider the following HTML structure: <div class="page-info"> <s ...

javascripthtmlnode.jsnpmcheerio

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

htmlcss

Implementing a universal (click) attribute for Angular 2 in CSS

When using Angular 1, it was as easy as following this syntax: [ngClick], [data-ng-click], [x-ng-click] { cursor: pointer; } This snippet ensured that any tags with the ng-click attribute displayed a pointer cursor. How can we achieve the same effect ...

htmlcssangularjsangular