Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- background: blue
- }
- .progressbar {
- position: absolute;
- height: 30px;
- width: 40%;
- border-radius: 20px;
- }
- .progressbar.pasive {
- z-index: 1;
- background-color: #f0a3a3;
- background-image: -webkit-linear-gradient(transparent, #f42323);
- }
- .progressbar.pasive::after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.05, 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, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.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;
- }
- .progressbar.active {
- z-index: 4;
- background: red;
- width: 20%
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement