/* ====================================================================================================================================================== Progress Bar ====================================================================================================================================================== */ .avia-progress-bar-container { margin: 15px 0; clear: both; } .avia-progress-bar { position: relative; margin-bottom: 4px; } .avia-progress-bar .progressbar-title-wrap { position: absolute; z-index: 2; bottom: 3px; right: 3px; color: white; background: black; background: rgba(0, 0, 0, 0.5); padding: 1px 10px 2px 10px; border-radius: 3px; line-height: 21px; } .progressbar-icon { float: right; margin-left: 5px; } .icon-bar-no .progressbar-icon { display: none; } .progressbar-title { float: right; } .avia-progress-bar .progress { width: 100%; height: 30px; line-height: 30px; position: relative; border-radius: 3px; overflow: hidden; box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.07); } #top .avia-progress-bar div.progress .bar-outer, #top .avia-progress-bar div.progress .bar { height: 100%; position: absolute; top: 0; right: 0; width: 100%; background-size: 32px 32px; border-radius: 3px; } .av-animated-bar .avia-progress-bar div.progress .bar { -webkit-animation: avia-bg-move 1.2s linear infinite; /* Safari 4+ */ animation: avia-bg-move 1.2s linear infinite; /* IE 10+ */ height: 100%; } .avia-progress-bar div.progress { clear: both; } .avia_transform #top div.progress .bar-outer { width: 0; } .av-small-bar .avia-progress-bar { margin-top: 1.9em; } .av-small-bar .avia-progress-bar:first-child { margin-top: 0em; } .av-small-bar .avia-progress-bar .progressbar-title-wrap { position: relative; bottom: 0; right: 0; padding: 0; background: none; color: inherit; line-height: 1.65em; font-size: 0.9em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; } .av-small-bar .avia-progress-bar .progress { height: 10px; line-height: 1em; border-radius: 0px; } .progressbar-percent { float: left; opacity: 0.6; } #top .av-small-bar .avia-progress-bar div.progress .bar-outer, #top .av-small-bar .avia-progress-bar div.progress .bar { border-radius: 0px; } .avia_transform #top .avia-progress-bar div.progress.avia_start_animation .bar-outer { -webkit-animation: avia_expand 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */ animation: avia_expand 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */ width: 100%; } .grey-bar .bar { background: #555; } .av-striped-bar .grey-bar .bar { background-image: -webkit-linear-gradient(45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444); background-image: -moz-linear-gradient(45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444); background-image: linear-gradient(45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444); } .blue-bar .bar { background: #7bb0e7; } .av-striped-bar .blue-bar .bar { background-image: -webkit-linear-gradient(45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9); background-image: -moz-linear-gradient(45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9); background-image: linear-gradient(45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9); } .green-bar .bar { background: #83a846; } .av-striped-bar .green-bar .bar { background-image: -webkit-linear-gradient(45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846); background-image: -moz-linear-gradient(45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846); background-image: linear-gradient(45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846); } .orange-bar .bar { background: #EDAE44; } .av-striped-bar .orange-bar .bar { background-image: -webkit-linear-gradient(45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66); background-image: -moz-linear-gradient(45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66); background-image: linear-gradient(45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66); } .black-bar .bar { background: #222; } .av-striped-bar .black-bar .bar { background-image: -webkit-linear-gradient(45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444); background-image: -moz-linear-gradient(45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444); background-image: linear-gradient(45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444); } .red-bar .bar { background: #B02B2C; } .av-striped-bar .red-bar .bar { background-image: -webkit-linear-gradient(45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E); background-image: -moz-linear-gradient(45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E); background-image: linear-gradient(45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E); } .teal-bar .bar { background: #5F8789; } .av-striped-bar .teal-bar .bar { background-image: -webkit-linear-gradient(45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB); background-image: -moz-linear-gradient(45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB); background-image: linear-gradient(45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB); } .aqua-bar .bar { background: #4ECAC2; } .av-striped-bar .aqua-bar .bar { background-image: -webkit-linear-gradient(45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4); background-image: -moz-linear-gradient(45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4); background-image: linear-gradient(45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4); } .purple-bar .bar { background: #745F7E; } .av-striped-bar .purple-bar .bar { background-image: -webkit-linear-gradient(45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F); background-image: -moz-linear-gradient(45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F); background-image: linear-gradient(45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F); } .pink-bar .bar { background: #D65799; } .av-striped-bar .pink-bar .bar { background-image: -webkit-linear-gradient(45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB); background-image: -moz-linear-gradient(45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB); background-image: linear-gradient(45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB); } .silver-bar .bar { background: #D7D7D7; } .av-striped-bar .silver-bar .bar { background-image: -webkit-linear-gradient(45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9); background-image: -moz-linear-gradient(45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9); background-image: linear-gradient(45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9); }