CSS3加载进度条动画特效代码

使用方法

.cd__main{
    background: #7fa7b8 !important;
   position: relative;
  min-height: 640px;
  align-items: center;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  background-color: #7fa7b8;
}
::-webkit-scrollbar{
  display: none;
}

.bar{
  height: 50px;
  min-width: 500px;
  background-color: none;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  box-shadow:  7px 7px 14px #4b636d,
             -7px -7px 14px #b3ebff;
  cursor: pointer;
}
.loading-text{
  margin: auto;
  color: #507686;
  letter-spacing: 2px;
  font-weight: 300;
  font-size: 20px;
}
.progress{
  height: 50px;
  animation-name: animate;
  background: #97d7f2;
  position: absolute;
  z-index: 1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  justify-self: start;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0.5;
}
@keyframes animate {
  0%   {width: 0%;}
  25%  {width: 10%;}
  50%  {width: 40%;}
  75%  {width: 50%;}
  100% {width: 100%;}
}