123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- @font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 300;
-
- }
- @font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- }
- @font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 600;
- }
- * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- body {
- padding: 20px;
- background: #1a1a1a;
- color: #DDD;
- font-family: "Open Sans", sans-serif;
- font-size: 17px;
- font-weight: 400;
- }
- .progress-container, .progress {
- border-radius: 20px;
- }
- .progress-container {
- width: 40px;
- height: 40px;
- border: solid 1px #111;
- background: #151515;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
- margin: 0 auto;
- position: relative;
- overflow: hidden;
- }
- .progress-container.done {
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 2px #0c8112;
- }
- .progress-container.done .progress {
- background: #0f9816;
- }
- .progress-container.done .progress-overlay {
- display: none;
- }
- .progress, .progress-overlay {
- position: absolute;
- }
- .progress {
- padding-left:50px;
- background: #114baf;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
- z-index: 1;
- bottom: 0;
- text-align: center;
- color: #151515;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
- font-weight: bold;
- transition: background 250ms ease;
- }
- @keyframes uploadarrow {
- 0% {
- bottom: 0%;
- border-bottom-color: rgba(255, 255, 255, 0);
- }
- 50% {
- border-bottom-color: rgba(255, 255, 255, 0.1);
- }
- 100% {
- bottom: 100%;
- border-bottom-color: rgba(255, 255, 255, 0);
- }
- }
- @-webkit-keyframes uploadarrow {
- 0% {
- bottom: 0%;
- border-bottom-color: rgba(255, 255, 255, 0);
- }
- 50% {
- border-bottom-color: rgba(255, 255, 255, 0.1);
- }
- 100% {
- bottom: 100%;
- border-bottom-color: rgba(255, 255, 255, 0);
- }
- }
- .progress-overlay {
- z-index: 2;
- width: 0;
- height: 100%;
- bottom: 0;
- left: 15px;
- border: solid 20px transparent;
- border-width: 0 25px 20px 25px;
- border-bottom-color: rgba(255, 255, 255, 0.25);
- -webkit-animation: uploadarrow 900ms infinite ease-out;
- -moz-animation: uploadarrow 900ms infinite linear;
- -o-animation: uploadarrow 900ms infinite linear;
- animation: uploadarrow 900ms infinite linear;
- }
|