Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html { height: 100% }
- body { height: 100%; margin: 0; padding: 0; position: relative; }
- #imageView { height: 100%; background-size: cover; display: none; }
- #progressViewDisplay { padding: 10% 60px 20px 60px; text-align: center; font-family: Arial; font-size: 36px; }
- #slideShowControls { position: absolute; top: 10px; right: 20px; width: 100%; height: 60px; line-height: 60px; text-align: right; display: none; }
- .meter {
- height: 40px;
- position: relative;
- margin: 0 60px 60px 60px;
- background: #ccc;
- -moz-border-radius: 25px;
- -webkit-border-radius: 25px;
- border-radius: 25px;
- padding: 10px;
- -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
- -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
- }
- .meter > span {
- display: block;
- height: 100%;
- -webkit-border-top-right-radius: 8px;
- -webkit-border-bottom-right-radius: 8px;
- -moz-border-radius-topright: 8px;
- -moz-border-radius-bottomright: 8px;
- border-top-right-radius: 8px;
- border-bottom-right-radius: 8px;
- -webkit-border-top-left-radius: 20px;
- -webkit-border-bottom-left-radius: 20px;
- -moz-border-radius-topleft: 20px;
- -moz-border-radius-bottomleft: 20px;
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
- background-color: rgb(43, 194, 83);
- background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
- background-image: -moz-linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
- -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
- -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
- box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
- position: relative;
- overflow: hidden;
- }
- .meter > span:after,
- .animate > span > span {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
- background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
- z-index: 1;
- -webkit-background-size: 50px 50px;
- -moz-background-size: 50px 50px;
- background-size: 50px 50px;
- -webkit-animation: move 2s linear infinite;
- -moz-animation: move 2s linear infinite;
- -webkit-border-top-right-radius: 8px;
- -webkit-border-bottom-right-radius: 8px;
- -moz-border-radius-topright: 8px;
- -moz-border-radius-bottomright: 8px;
- border-top-right-radius: 8px;
- border-bottom-right-radius: 8px;
- -webkit-border-top-left-radius: 20px;
- -webkit-border-bottom-left-radius: 20px;
- -moz-border-radius-topleft: 20px;
- -moz-border-radius-bottomleft: 20px;
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
- overflow: hidden;
- }
- .animate > span:after {
- display: none;
- }
- @-webkit-keyframes move {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: 50px 50px;
- }
- }
- @-moz-keyframes move {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: 50px 50px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement