Creating a loading bar through the animation of a linear-gradient

Question

Creating a loading bar through the animation of a linear-gradient

Creating a loading bar with a single colored element moving along a grey bar is my current project.

Unfortunately, I struggle with animating gradients in CSS. I found a solution that seems promising based on this answer: Make some gradient move endlessly in a progress bar like in Windows 7

foo {
  background-color: $cGray300;
  height: 10px;
  background: linear-gradient(to right,  $cGray300 0%, $cGray300 30%, #fed0d0 30%, #fed0d0 40%, $cGray300 40%, $cGray300 100%) repeat;
  background-size: 50% 100%;
  animation-name: moving-gradient;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes moving-gradient {
  0% { background-position: left bottom; }
  100% { background-position: right bottom; }
}

This is the outcome of my current implementation: https://i.sstatic.net/Qlp0Z.gif

However, I aim to have a larger red element that loops from the left side once it disappears on the right.

css

Answer 1

Answer №1

This code snippet was inspired by @Paulie_D's answer and has been modified to be responsive for any screen sizes, along with some additional tweaks.

The goal is to create a material preloader effect.

.state-changed{
position:relative;
width:400px;
height:20px;
border:1px solid silver;
}

.state-changed::after {
        content: '';
        position: absolute;
        height: 2px; 
        background: red;
        animation: progress 1.5s infinite ease-in-out ;
    }
    
    @keyframes progress {
    0% {
        left: 0;
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        right: 0;
        width: 0;
    }
}

<div class="state-changed"></div>

Answer 2

This code snippet was inspired by @Paulie_D's answer and has been modified to be responsive for any screen sizes, along with some additional tweaks.

The goal is to create a material preloader effect.

.state-changed{
position:relative;
width:400px;
height:20px;
border:1px solid silver;
}

.state-changed::after {
        content: '';
        position: absolute;
        height: 2px; 
        background: red;
        animation: progress 1.5s infinite ease-in-out ;
    }
    
    @keyframes progress {
    0% {
        left: 0;
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        right: 0;
        width: 0;
    }
}

<div class="state-changed"></div>

Answer 3

Answer №2

To achieve this effect, all you need is a pseudo-element along with some clever positioning and transformation techniques.

.bar {
  width: 50%;
  height: 10px;
  background: lightgrey;
  margin: 2em auto;
  position: relative;
  overflow: hidden;
}
.bar::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 30%;
  background: red;
  animation: progress 2s infinite linear;
}
@-webkit-keyframes progress {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}

<div class="bar"></div>

Answer 4

To achieve this effect, all you need is a pseudo-element along with some clever positioning and transformation techniques.

.bar {
  width: 50%;
  height: 10px;
  background: lightgrey;
  margin: 2em auto;
  position: relative;
  overflow: hidden;
}
.bar::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 30%;
  background: red;
  animation: progress 2s infinite linear;
}
@-webkit-keyframes progress {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}

<div class="bar"></div>

Answer 5

Answer №3

Check out this CodePen for a functional example

Here is the implementation using only CSS:

HTML:

<div class="loader8"></div>

CSS:

@-webkit-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@-moz-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@-o-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}

.loader8 {
    width:250px;
    height:16px;
    border:1px solid #bbb;
    border-radius:0px;
    position:relative;
    overflow:hidden;
    background: #E6E6E6;
    margin:5px;
}

.loader8:after {
    content: " ";
    display:block;
    width:120px;
    top:-50%;
    height:250%;
    position:absolute;
    animation: greenglow 3s linear infinite;
    -webkit-animation: greenglow 3s linear infinite;
    z-index:2;
    background: #1CAE30;
}

Answer 6

Check out this CodePen for a functional example

Here is the implementation using only CSS:

HTML:

<div class="loader8"></div>

CSS:

@-webkit-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@-moz-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@-o-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}

.loader8 {
    width:250px;
    height:16px;
    border:1px solid #bbb;
    border-radius:0px;
    position:relative;
    overflow:hidden;
    background: #E6E6E6;
    margin:5px;
}

.loader8:after {
    content: " ";
    display:block;
    width:120px;
    top:-50%;
    height:250%;
    position:absolute;
    animation: greenglow 3s linear infinite;
    -webkit-animation: greenglow 3s linear infinite;
    z-index:2;
    background: #1CAE30;
}

Creating a loading bar through the animation of a linear-gradient

Answer №1

Answer №2

Answer №3

Similar questions

The Bootstrap 5 navigation bar does not extend to the full width of its parent

Resolved the issue of the background image flickering during the transition of the slideshow at the top of

Toggle visibility of div element with a button press

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?

Is there a distinction between em and percentage measurements and do their defaults have specified definitions?

Creating a stylish layout with Bootstrap 4: equal height divs filled with color and a sleek gutter in between

Customize your Google Translate experience by choosing your own option values

Using local file paths in v-lazy-image does not function properly

Display a fancy slideshow that transitions to five new images when the last one is reached

Could someone offer some assistance in grasping the order of operations in jQuery syntax

Place the div directly beside the input field on the right side

Styling with CSS: Enhancing list items with separators

Exploring the differences between a fixed-top navbar and dark theme in Bootstrap 5.3

What is the best way to add a CSS style to any element that has the .btn:hover pseudo-class, except for those elements with the class '.dropdown-toggle'?

Tips for crafting a perpetually looping animated shape using canvas

Footer remains fixed to the bottom of the page even when there is not enough content to

Is the CSS parser malfunctioning?

What is the best way to horizontally align an inline div using CSS?

Is there a way to retrieve the height of an image and adjust its parent container height to be automatic?

Achieving unique horizontal and vertical spacing in Material UI Grid