search

rstacruz / nprogress

For slim progress bars like on YouTube, Medium, etc
http://ricostacruz.com/nprogress
MIT License
25.99k stars 1.81k forks source link

[Feature request] Make progress animated #182

Closed Haocen closed 6 years ago

Haocen commented 7 years ago

Idea borrowed from Bootstrap paper theme:

#nprogress .bar {
  height: 4px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  animation: progress-bar-stripes 2s linear infinite;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}