How to write CSS keyframes to indeterminate material design progress bar


Tags: css,css3,material-design

Problem :

I want to make an indeterminate progress bar as in material design (the second one) in CSS3 in a web page. Can anyone share the necessary CSS magic? I want it to behave exactly the same as on the video, so one end is accelerating while the other is slowing down until they switch.

I could not find any existing example that would work this way.



Solution :

I found a good example on CodePen.

In case the link goes down, here is the code:

HTML:

<div class="slider">
  <div class="line"></div>
  <div class="subline inc"></div>
  <div class="subline dec"></div>
</div>

CSS:

body{
  background:#ffffff;
  margin:50px 300px;
}

.slider{
  position:absolute;
  width:1000px;
  height:5px;
  overflow-x: hidden;
}

.line{
  position:absolute;
  opacity: 0.4;
  background:#4a8df8;
  width:150%;
  height:5px;
}

.subline{
  position:absolute;
  background:#4a8df8;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from { left: -5%; width: 5%; }
   to { left: 130%; width: 100%;}
}
@keyframes decrease {
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
}

    CSS Howto..

    How to get inline-blocks to sit side-by-side?

    how to create horizontal drop-down menu with javascript for asp.net website?

    CSS: how to make a span only as wide as its content

    How can i draw a box using css like the answer box in stackoverflow?

    How do I center a button in html5?

    How to use a CSS for only one div and not the rest of the code?

    How to get div so it always reaches the bottom?

    How to use nth-child with only direct children?

    how can i add a css file to body of a page?

    How to set div height to 100% of chosen print paper?

    How to make a toggleable navbar in pure CSS?

    How to change element CSS class when different part of web page is present?

    How to queue CSS3 animations when shown after page scroll (JSFiddle provided)

    How to get jQuery UI tabs element panels and set visibility on some of them?

    How do I add inline css to dropdown in Yii?

    How to prevent HTML elements from being pushed down the page

    How to get a jQuery modal overlay to not push the scrollbar around?

    How to have a horizontal line at the middle of a html heading with CSS?

    How to remove class using CSS

    How do I apply properties to a previous sibling on hover?

    How can I make the first letter push itself into the paragraph like a newspaper style

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to make permanent changes to a website's CSS from within the browser?

    How can I build a dynamic menu using CSS and JavaScript?

    How to make a bootstrap modal fade in from the bottom?

    How to make a simple plus one voting system in code igniter

    How to make combination of images responsive?

    How to apply a css class for jqGrid height property setGridHeight?

    How to make equal space between boxes in one row via CSS

    How to divide a border into 4 equal parts?