KingMcDonalds
50 lines
1.1 KiB
CSS
50 lines
1.1 KiB
CSS
#progressui, #textui, #notification1 {
|
|
padding: 25px;
|
|
background: rgba(0,0,0,0.5);
|
|
width: 800px;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 45%;
|
|
transform: translate(-50%, 0);
|
|
text-align: center;
|
|
color: white;
|
|
opacity: 0;
|
|
transition: all 250ms linear;
|
|
font-size: 1.75rem;
|
|
text-shadow: 0px 2px 2px rgba(0,0,0,0.85);
|
|
}
|
|
#textui {
|
|
top: 35%;
|
|
}
|
|
#progress-circle {
|
|
width: 130px;
|
|
transform: rotate(95deg);
|
|
}
|
|
#progress-percent{
|
|
position: absolute;
|
|
top: 70px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
#progress-circle-text {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
svg circle { display: block; fill: transparent; stroke-width: 5px; stroke-linecap: round; stroke-dasharray: 278; stroke-dashoffset: 0; transform-origin: 50% 50%; }
|
|
svg circle.mask { stroke: rgba(0,0,0,0.35); }
|
|
svg circle.speed { stroke: url(#speed-gradient); stroke-dashoffset: 180; }
|
|
svg:first-child { z-index: 11; }
|
|
|
|
svg circle { transition: all 250ms linear; }
|
|
svg circle.guage { stroke: #ffffff; stroke-dashoffset: 278; }
|
|
|
|
#notification1 {
|
|
top: 10px;
|
|
left: 10px;
|
|
text-align: left;
|
|
padding: 10px;
|
|
width: auto;
|
|
transform: translate(0, 0);
|
|
}
|