| body { | |
| font-family: sans-serif; | |
| background-color: #f0f0f0; | |
| } | |
| h1 { | |
| font-size: 36px; | |
| } | |
| ul, ol { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| li { | |
| padding: 10px; | |
| margin: 10px; | |
| background-color: #fff; | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| } | |
| .container { | |
| background-color: #f0f0f0; | |
| padding: 20px; | |
| margin: 20px; | |
| } | |
| .progressbox { | |
| background-color: #fff; | |
| margin: 20px; | |
| padding: 20px; | |
| } | |
| .progressBar { | |
| height: 100%; | |
| background-color: #f0f0f0; | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| } | |
| .progressBox { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 200px; | |
| height: 200px; | |
| background-color: #fff; | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| } | |
| .progressbar { | |
| position: relative; | |
| width: 200px; | |
| height: 20px; | |
| background-color: #fff; | |
| border-radius: 5px; | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| } | |
| .progress-value { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #fff; | |
| background-color: #f0f0f0; | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| } | |
| .completed-message { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 32px; | |
| font-weight: bold; | |
| color: #fff; | |
| background-color: #009900; | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); | |
| } |