Just copy and paste the fallowing code into css/custom.css
.progress_box {
background-color: #222;
padding: 2px;
}
.progress_bar {
border-radius: 10px;
background: linear-gradient(
90deg,
#ff6b6b,
#ff8e53,
#f1c40f,
#1abc9c,
#3498db,
#9b59b6,
#e74c3c
);
background-size: 200%;
position: relative;
overflow: hidden;
animation: rainbow 6s linear infinite;
font-weight: bold;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.progress_bar.animate {
animation: slideIn 1.5s ease-in-out forwards, rainbow 6s linear infinite;
}
@keyframes slideIn {
from {
width: 0;
}
to {
width: var(--progress-width);
}
}
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.progress_bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0.3) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.3) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px;
}Important:
Then type the /clearcache command, and reload the page and enjoy!.
