Loading data with a horizontal progress indicator

I am attempting to create a loader in the form of a horizontal line. Here is my HTML code:

<div class="animated yt-loader"></div>

And here is my CSS code:

body {
  margin: 0;
}
.animated {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.yt-loader {
    -webkit-animation-name: horizontalProgressBar;
    animation-name: horizontalProgressBar;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    background: #ef534e;
    height: 3px;
    left: 0;
    top: 0;
    width: 0%;
    z-index: 9999;
    position:relative;
}

.yt-loader:after{
  display: block;
  position: absolute;
  content:'';
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: #ef534e 1px 0 6px 1px;
  opacity: 0.5;
}
@keyframes horizontalProgressBar
{
    0%   {width: 0%;}
    20%  {width: 10%;}
    30%  {width: 15%;}
    40%  {width: 18%;}
    50%  {width: 20%;}
    60%  {width: 22%;}
    100% {width: 100%;}
}

However, I am facing an issue implementing this with actual data loading. I need to introduce some delay or other mechanism so that after 3-4 seconds when the data loads, the line width increases to 100%.

Answer №1

Hello,

It is necessary to adjust the duration of the animation in the Animated Class

-webkit-animation-duration: 2s;
    animation-duration: 2s;

VIEW DEMO HERE

Answer №2

To adjust the speed of the animation, you can change the animation-duration to either 2s or 4s.

body {
  margin: 0;
}
.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.yt-loader {
    -webkit-animation-name: horizontalProgressBar;
    animation-name: horizontalProgressBar;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    background: #ef534e;
    height: 3px;
    left: 0;
    top: 0;
    width: 0%;
    z-index: 9999;
    position:relative;
}

.yt-loader:after{
  display: block;
  position: absolute;
  content:'';
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: #ef534e 1px 0 6px 1px;
  opacity: 0.5;
}
@keyframes horizontalProgressBar
{
    0%   {width: 0%;}
    20%  {width: 10%;}
    30%  {width: 15%;}
    40%  {width: 18%;}
    50%  {width: 20%;}
    60%  {width: 22%;}
    100% {width: 100%;}
}
<div class="animated yt-loader"></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

Tips for hiding a table row in ASP Listview utilizing CSS

Can anybody help me understand why my ListView is ignoring the css properties applied to the div in the markup below? <ItemTemplate> <tr> <td><%# Eval("RowNumber")%></td> <td><%# Eval("Desc")%&g ...

Exploring the capabilities of Flex in handling HTML files

I'm currently using libcurl and flex to fetch images from a website. After successfully setting up the libcurl easy functions to retrieve any HTML file from a specific URL, I now find myself at a point where I have the regular expressions but am unsu ...

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

Is there a way for me to choose the submit button that will be activated when I hit Enter?

I have a form with multiple divs, each containing a textbox and a submit button. My issue is that when I input text into one of the textboxes and press enter, it always triggers the first submit button instead of the one in the same div as the textbox. Is ...

Tips for getting validation to function properly on Bootstrap v4 using Bootstrap validator

Recently, I made the switch from Bootstrap v3 to v4, and although the JavaScript part of Bootstrap Validator is still functioning properly, the styling seems to have disappeared. The bootstrap validator that I utilized can be found here. This is how it c ...

Changing the Background with jQuery When Scrolling Reaches a Specific Threshold

Currently, I am working on developing a website with horizontal scrolling capabilities. You can check out the DEMO at . In this demo, the scooter is featured as a fixed background image. My goal is to have the background image change to a different scoote ...

Printing from a Windows computer may sometimes result in a blank page

Looking to incorporate a print button into an HTML page, I'm facing an issue. The majority of the content on the page should not be included in the printed version, so my approach involves hiding everything in print and then showing only the designate ...

Generate a new web component using JavaScript

My HTML table looks like this: <table id = "rpttable" name = "rpttable"> <thead> Column Headers here... </thead> <tbody id = "rptbody" name = "rptbody"> data here <3 .... </tbody> </table> And in my ...

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

The presence of a white block as the background on a webpage in Ubuntu

Currently working on a website in Ubuntu 14.10. Encountering an issue with Chrome not rendering the background correctly. The footer displays fine, covering the entire width, but the content div background remains white. Check out the image for visual re ...

Tips for Making a Div 100% Width While Hiding Another Div Using jQuery

I am looking for a solution to adjust the width of the blue div to 100% when hiding the red div. Can anyone help with this? Here is my JavaScript code <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> ...

NgFor displaying only the initial item in the array

I am currently working on creating a dynamic menu in Angular and I have encountered an issue where only the first value in the array is being displayed. How can I modify it to dynamically display all the values from the array? What could be causing this pr ...

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

Stop Sublime Text from automatically calculating Less2Css

Within my workflow using Sublime Text and Less2Css for dealing with less files, I encountered an issue where specifying the max-height of a container as 100% - 20px resulted in minification reducing it to '80%'. Is there a way to work around this ...

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

When creating a dynamic page number using JavaScript during a print event, the height of an A4 page is not taken into

While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

Utilizing PHP to create a loop that processes two submitted forms

Is my code handling two submit forms in a loop correctly? I am facing an issue with the second form where it redirects to selectedSold.php but does not display any details or retrieve the name="nganga" of the selected row. The first form works fine, so I c ...