|
- /*---------------------------*/
- .container {
- margin: auto;
- width : 50%;
- }
- .progress-bar {
- background-color: #1a1a1a;
- height: 25px;
- padding: 5px;
- width: 350px;
- position: relative;
- margin: 70px 0 20px 0;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
- -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
- box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
- }
-
- .progress-bar span {
- display: inline-block;
- height: 100%;
- background-color: #777;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
- -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
- box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
- -webkit-transition: width .4s ease-in-out;
- -moz-transition: width .4s ease-in-out;
- -ms-transition: width .4s ease-in-out;
- -o-transition: width .4s ease-in-out;
- transition: width .4s ease-in-out;
- }
-
-
- .blue span {
- background-color: #34c2e3;
- }
-
- .red span {
- background-color: #f42323;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#f42323), to(#ff0000));
- background-image: -webkit-linear-gradient(top, #f42323, #ff0000);
- background-image: -moz-linear-gradient(top, #f42323, #ff0000);
- background-image: -ms-linear-gradient(top, #f42323, #ff0000);
- background-image: -o-linear-gradient(top, #f42323, #ff0000);
- background-image: linear-gradient(top, #f42323, #ff0000);
- }
-
- .green span {
- background-color: #a5df41;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
- background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
- background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
- background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
- background-image: -o-linear-gradient(top, #a5df41, #4ca916);
- background-image: linear-gradient(top, #a5df41, #4ca916);
- }
-
- /*---------------------------*/
-
- .stripes span {
- -webkit-background-size: 30px 30px;
- -moz-background-size: 30px 30px;
- background-size: 30px 30px;
- background-image: -webkit-gradient(linear, left top, right bottom,
- color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
- color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
- color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
- to(transparent));
- background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
- transparent 75%, transparent);
- background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
- transparent 75%, transparent);
- background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
- transparent 75%, transparent);
- background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
- transparent 75%, transparent);
- background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
- transparent 75%, transparent);
-
- -webkit-animation: animate-stripes 3s linear infinite;
- -moz-animation: animate-stripes 3s linear infinite;
- }
-
- @-webkit-keyframes animate-stripes {
- 0% {background-position: 0 0;} 100% {background-position: 60px 0;}
- }
-
-
- @-moz-keyframes animate-stripes {
- 0% {background-position: 0 0;} 100% {background-position: 60px 0;}
- }
-
- /*---------------------------*/
-
- .shine span {
- position: relative;
- }
-
- .shine span::after {
- content: '';
- opacity: 0;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: #fff;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
-
- -webkit-animation: animate-shine 2s ease-out infinite;
- -moz-animation: animate-shine 2s ease-out infinite;
- }
-
- @-webkit-keyframes animate-shine {
- 0% {opacity: 0; width: 0;}
- 50% {opacity: .5;}
- 100% {opacity: 0; width: 95%;}
- }
-
-
- @-moz-keyframes animate-shine {
- 0% {opacity: 0; width: 0;}
- 50% {opacity: .5;}
- 100% {opacity: 0; width: 95%;}
- }
- .glow span {
- -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
- -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
- box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-
- -webkit-animation: animate-glow 1s ease-out infinite;
- -moz-animation: animate-glow 1s ease-out infinite;
- }
-
- @-webkit-keyframes animate-glow {
- 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
- 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
- 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
- }
-
- @-moz-keyframes animate-glow {
- 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
- 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
- 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
- }
-
|
