22 lines
612 B
CSS
22 lines
612 B
CSS
/* ----- Progress Bar ----- */
|
|
.progress-bar {
|
|
opacity: 0;
|
|
height: 2px;
|
|
width: 0;
|
|
background: #3bb3e0 linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
|
|
background-size: 900% 900%;
|
|
transition: opacity 1s ease-in-out, width 0s ease-in-out 1s;
|
|
animation: rainbow 3s ease infinite;
|
|
}
|
|
|
|
.progress-bar.on {
|
|
width: 100%;
|
|
opacity: 1;
|
|
transition: opacity 1s ease-in-out, width 2s ease-in-out;
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
0% { background-position: 0% 100%; }
|
|
50% { background-position: 100% 200%; }
|
|
100% { background-position: 0% 100%; }
|
|
} |