You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
6.7 KiB
312 lines
6.7 KiB
.ui.progress {
|
|
border: 1px solid #DDDDDD;
|
|
|
|
width: 350px;
|
|
max-width: 100%;
|
|
height: 35px;
|
|
|
|
background-color: #FAFAFA;
|
|
padding: 5px;
|
|
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ui.progress .bar {
|
|
display: inline-block;
|
|
height: 100%;
|
|
|
|
background-color: #CCCCCC;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
|
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
|
|
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
|
|
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
|
|
|
|
-webkit-transition:
|
|
width 1s ease-out,
|
|
background-color 1s ease-out
|
|
;
|
|
-moz-transition:
|
|
width 1s ease-out,
|
|
background-color 1s ease-out
|
|
;
|
|
-ms-transition:
|
|
width 1s ease-out,
|
|
background-color 1s ease-out
|
|
;
|
|
-o-transition:
|
|
width 1s ease-out,
|
|
background-color 1s ease-out
|
|
;
|
|
transition:
|
|
width 1s ease-out,
|
|
background-color 1s ease-out
|
|
;
|
|
}
|
|
|
|
|
|
/* Colors */
|
|
.ui.blue.progress .bar {
|
|
background-color: #6ECFF5;
|
|
}
|
|
|
|
/* Fluid Width */
|
|
.ui.fluid.progress {
|
|
width: 100%;
|
|
}
|
|
|
|
/* State */
|
|
.ui.success.progress .bar {
|
|
background-color: #73E064 !important;
|
|
}
|
|
.ui.success.progress .bar,
|
|
.ui.success.progress .bar::after {
|
|
-webkit-animation: none !important;
|
|
-moz-animation: none !important;
|
|
}
|
|
.ui.error.progress .bar {
|
|
background-color: #DF9BA4 !important;
|
|
}
|
|
.ui.error.progress .bar,
|
|
.ui.error.progress .bar::after {
|
|
-webkit-animation: none !important;
|
|
-moz-animation: none !important;
|
|
}
|
|
|
|
|
|
/* Variations */
|
|
|
|
|
|
.ui.progress.striped .bar {
|
|
-webkit-background-size: 30px 30px;
|
|
-moz-background-size: 30px 30px;
|
|
background-size: 30px 30px;
|
|
background-image:
|
|
-webkit-gradient(linear, left top, right bottom,
|
|
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
|
|
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
|
|
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
|
|
to(transparent)
|
|
)
|
|
;
|
|
background-image:
|
|
-webkit-linear-gradient(
|
|
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
|
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
|
transparent 75%, transparent
|
|
)
|
|
;
|
|
background-image:
|
|
-moz-linear-gradient(
|
|
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
|
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
|
transparent 75%, transparent
|
|
)
|
|
;
|
|
background-image:
|
|
-ms-linear-gradient(
|
|
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
|
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
|
transparent 75%, transparent
|
|
)
|
|
;
|
|
background-image:
|
|
-o-linear-gradient(
|
|
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
|
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
|
transparent 75%, transparent
|
|
)
|
|
;
|
|
background-image:
|
|
linear-gradient(
|
|
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
|
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
|
transparent 75%, transparent
|
|
)
|
|
;
|
|
|
|
-webkit-animation: animate-striped 3s linear infinite;
|
|
-moz-animation: animate-striped 3s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes animate-striped {
|
|
0% {
|
|
background-position: 0px 0;
|
|
}
|
|
100% {
|
|
background-position: 60px 0;
|
|
}
|
|
}
|
|
@-moz-keyframes animate-striped {
|
|
0% {
|
|
background-position: 0px 0;
|
|
}
|
|
100% {
|
|
background-position: 60px 0;
|
|
}
|
|
}
|
|
@keyframes animate-striped {
|
|
0% {
|
|
background-position: 0px 0;
|
|
}
|
|
100% {
|
|
background-position: 60px 0;
|
|
}
|
|
}
|
|
|
|
/* Shining animation */
|
|
.ui.shiny.progress .bar {
|
|
position: relative;
|
|
}
|
|
.ui.shiny.progress .bar::after {
|
|
content: '';
|
|
opacity: 0;
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
background: #FFFFFF;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
|
-webkit-animation: animate-shiny 2s ease-out infinite;
|
|
-moz-animation: animate-shiny 2s ease-out infinite;
|
|
}
|
|
|
|
@-webkit-keyframes animate-shiny {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 95%;
|
|
}
|
|
}
|
|
@-moz-keyframes animate-shiny {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@keyframes animate-shiny {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Glowing animation */
|
|
.ui.glowing.progress .bar {
|
|
-moz-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
-webkit-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
-webkit-animation: animate-glow 1s ease-out infinite;
|
|
-moz-animation: animate-glow 1s ease-out infinite;
|
|
}
|
|
|
|
@-webkit-keyframes animate-glow {
|
|
0% {
|
|
-webkit-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
}
|
|
50% {
|
|
-webkit-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.3) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.3) inset
|
|
;
|
|
}
|
|
100% {
|
|
-webkit-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes animate-glow {
|
|
0% {
|
|
-moz-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
}
|
|
50% {
|
|
-moz-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.3) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.3) inset
|
|
;
|
|
}
|
|
100% {
|
|
-moz-box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
box-shadow:
|
|
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
|
|
0px -5px 5px rgba(255, 255, 255, 0.7) inset
|
|
;
|
|
}
|
|
}
|