CSS Progress Bar

  Loading Bar

.bar{
  border:1px solid maroon;
  margin:40px 30px;
  padding: 8px 0;
  height:55px;
  background: maroon;
  background: -webkit-linear-gradient(left, maroon 50%, #fff 50%);
  background-size:200% 100%;
  background-position: 100% 0%;
  -webkit-animation: AnimationName 10s ease infinite;
}
@keyframes AnimationName{
  100%{
    background-position:0% 0%;
  }}

.text{
  font-size:22px;
  margin:15px 0;
  text-align:center;
  text-transform:uppercase;
  text-weight:bold;
  background: -webkit-linear-gradient(left, #fff 50%, maroon 50%);
  background-size:200% 100%;
  background-position: 100% 0%;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  animation: AnimationName 10s ease infinite;
}