CSS - 写一个动态渐变色loading bar

1,095 阅读1分钟

css如下,主要利用line-gradient和animation,demo

@keyframes test 
{
  from { left: 0 }
  to { left: -100% }
}

.container {
  position: relative;
  width: 100%;
  height: 5px;
/*   border: 1px solid gray; */
  border-radius: 10px;
  overflow: hidden;
}

.container:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg, #fff,#ffea97,#ffc5da,#62d3ff, #fff);
  background-size: 50% 100%;
  display: block;
  animation: test .75s linear infinite;
}