scrimba
Note at 2:14
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 2:14
AboutCommentsNotes
Note at 2:14
Expand for more info
index.css
run
preview
console
html,
body {
margin: 0;
padding: 0;
}

:root {
--progressbar-bg: lightgrey;
--start: red;
--middle: blue;
--finish: green;
}

.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 0 50px;
}

.progress-bar,
.progress-status {
height: 30px;
background: var(--progressbar-bg);
border-radius: 50px;
width: 100%;
}

.progress-bar {
position: relative;
}

.progress-status {
position: absolute;
top: 0;
animation: progress 5s infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

@keyframes progress {
0% {
width: 0%;
background-color: var(--start);
}
50% {
width: 50%;
background-color: var(--middle);
}
100% {
width: 100%;
background-color: var(--finish);
}
}
Console
/index.html
LIVE