1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/bower_components/emby-webcomponents/emby-progressring/emby-progressring.css
Erwin de Haan 4678528d00 First separation commit.
Added LICENSE, README.md, CONTRIBUTORS.md
2019-01-09 12:36:54 +01:00

157 lines
No EOL
3.6 KiB
CSS

.progressring {
position: relative;
width: 2.6em;
height: 2.6em;
float: left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.progressring-bg {
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: .25em solid rgba(0, 0, 0, 1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: rgba(0, 0, 0, .9);
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.spiner-holder-one,
.spiner-holder-two {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: 0 0;
-webkit-box-sizing: border-box
}
.progressring-text {
text-align: center;
color: #ddd;
font-size: 90%
}
.spiner-holder-one {
width: 51%;
height: 51%;
box-sizing: border-box
}
.spiner-holder-two {
width: 100%;
height: 100%;
box-sizing: border-box
}
.progressring-spiner {
width: 200%;
height: 200%;
-webkit-border-radius: 50%;
border-radius: 50%;
border-width: .25em;
border-style: solid;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.animate-0-25-a {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 180ms ease-out;
-o-transition: transform 180ms ease-out;
transition: transform 180ms ease-out
}
.animate-0-25-b,
.animate-25-50-a {
-webkit-transition: -webkit-transform 180ms ease-out;
-o-transition: transform 180ms ease-out
}
.animate-0-25-b {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
transition: transform 180ms ease-out
}
.animate-25-50-a {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
transition: transform 180ms ease-out
}
.animate-25-50-b,
.animate-50-75-a {
-webkit-transition: -webkit-transform 180ms ease-out;
-o-transition: transform 180ms ease-out
}
.animate-25-50-b {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
transition: transform 180ms ease-out
}
.animate-50-75-a {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
transition: transform 180ms ease-out
}
.animate-50-75-b,
.animate-75-100-a {
-webkit-transition: -webkit-transform 180ms ease-out;
-o-transition: transform 180ms ease-out
}
.animate-50-75-b {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
transition: transform 180ms ease-out
}
.animate-75-100-a {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
transition: transform 180ms ease-out
}
.animate-75-100-b {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 180ms ease-out;
-o-transition: transform 180ms ease-out;
transition: transform 180ms ease-out
}