glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-26 06:14:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Custom Progress Bar with Half Working Animation

Browse Source
This commit is contained in:
db-2001
2024-04-25 02:49:34 -04:00
parent 3648ee221c
commit 1aa230bce2
3 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
Website/styles/base.css
View File

@ -1166,16 +1166,48 @@ border-bar-button.in-library:hover {
color: #fff;
}
.section-item > .jobDetails > .jobProgressBar {
.section-item > .jobDetails > .progress-container {
margin: 5px;
height: 10px;
border-radius: 7px;
height: 15px;
border-radius: 12px;
overflow: hidden;
background-color: #999999;
position: relative;
}
.section-item > .jobDetails > .jobProgressSpan {
margin: 5px;
margin-left: auto;
margin-right: 5px;
.progress-container > .jobProgressBar {
margin: 0px;
display: block;
height: 15px;
padding-left: 5px;
border-radius: 12px;
position: absolute;
left: 0;
top: 0;
background-color: #0075fa;
color: white;
justify-content: left;
font-size: 8pt;
line-height: 15px;
}
.progress-container > .pending {
width: 50%;
display: block;
height: 15px;
top: 0%;
position: absolute;
border-radius: 12px;
background-color: #0075fa;
animation: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {width: 10%; transform: translateX(0);};
50% {width: 50%; transform: translateX(100%);};
100% {width: 10%; transform: translateX(0);};
}
.section-item > .jobDetails > .jobCancel {