js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added progress bars

Browse Source
This commit is contained in:
Cory LaViska
2017-08-11 16:12:13 -04:00
parent 36063a22d0
commit 1f4c62ec2c
25 changed files with 275 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
source/css/progress-bars.css Normal file
View File

@@ -0,0 +1,62 @@
/*! Progress Bars */
@keyframes progress-indeterminate {
0% {
left: -50%;
}
100% {
left: 100%;
}
}
.progress {
position: relative;
width: 100%;
height: var(--progress-height);
background-color: var(--progress-bg-color);
border-radius: var(--progress-border-radius);
display: block;
overflow: hidden;
margin-bottom: 1rem;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
font-size: var(--progress-font-size);
line-height: var(--progress-height);
text-align: center;
color: var(--progress-color);
background-color: var(--progress-bar-bg-color);
transition: var(--progress-speed-change) width;
user-select: none;
cursor: default;
}
.progress-small {
height: var(--progress-height-small);
}
.progress-small .progress-bar {
line-height: var(--progress-height-small);
font-size: var(--progress-font-size-small);
}
.progress-big {
height: var(--progress-height-big);
}
.progress-big .progress-bar {
height: var(--progress-height-big);
line-height: var(--progress-height-big);
font-size: var(--progress-font-size-big);
}
.progress-indeterminate .progress-bar {
width: 50% !important;
animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite;
}