Created
August 24, 2021 21:24
-
-
Save Sudrien/5017cc6bcbe2c6a3b618011c323f96d1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#progress { //it's just a div | |
display: block; | |
width: 500px; | |
position: fixed; | |
top: 55%; | |
left: 50%; | |
margin-left: -250px; | |
z-index: 17001; | |
//first attempt tried to animate a multi-stage gradient. Didn't work. | |
background-image: linear-gradient(90deg, #0b5093, #0c5dab); //make it an actual image, see if I care | |
border-radius: 4px; | |
border: 1px solid #eee; | |
outline: 1px solid #999; | |
box-shadow: 0px 0px 20px 20px #fff; | |
height: 30px; //the reason I'm doing this - thanks firefox & chrome | |
position: relative; // absolutes, look here | |
&:before, &:after { | |
position: absolute; | |
content: ""; | |
display: block; | |
background: #eee; | |
height: 100%; | |
animation-duration: 1.7s; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
animation-timing-function: ease-in-out; //linear just "time passing", ease-in-out more laborious | |
} | |
&:before, { | |
left: 0; | |
animation-name: progress_before; | |
} | |
&:after { | |
right: 0; | |
animation-name: progress_after; | |
} | |
} | |
@keyframes progress_before { | |
0% { width: 0%; } | |
100% { width: 65%; } | |
} | |
@keyframes progress_after { | |
0% { width: 65%; } | |
100% { width: 0%; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As of right now,
<progress>
ignores "height: ..." css in Firefox & Chrome. I just needed the equivalent of a spinner that took up more room, so here's css for a bouncing one.