webgme
Version:
Web-based Generic Modeling Environment
66 lines (49 loc) • 5.27 kB
CSS
div.loader-progressbar {
zoom: 1;
/* Increase this for a bigger symbol*/
width: 16px;
height: 16px;
background: -webkit-linear-gradient(90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), -webkit-linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), -webkit-linear-gradient(90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), -webkit-linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), -webkit-linear-gradient(90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), -webkit-linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), -webkit-linear-gradient(90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), -webkit-linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), -webkit-linear-gradient(90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), -webkit-linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), -webkit-linear-gradient(90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), -webkit-linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
background: linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
background-repeat: no-repeat;
background-size: 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 11px, 4px 11px, 4px 16px, 4px 16px, 4px 16px, 4px 16px;
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px;
-webkit-animation: wait 0.8s steps(1, start) infinite;
animation: wait 0.8s steps(1, start) infinite; }
div.loader-progressbar.stop {
-webkit-animation-play-state: paused;
animation-play-state: paused; }
@keyframes wait {
12% {
background-position: -4px 3px,-4px 3px, -4px 3px, -4px 3px, -4px 3px,-4px 3px, -4px 2px,-4px 2px, -4px 0px, -4px 0px, 0px 0px, 0px 0px; }
25% {
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px,-4px 3px, -4px 2px, -4px 2px, 0px 0px, 0px 0px, 6px 0px, 6px 0px; }
37% {
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, 0px 2px, 0px 2px, 6px 0px, 6px 0px, 12px 0px, 12px 0px; }
50% {
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, 0px 3px, 0px 3px, 6px 2px, 6px 2px, 12px 0px, 12px 0px, -4px 0px, -4px 0px; }
62% {
background-position: -4px 3px, -4px 3px, 0px 3px, 0px 3px, 6px 3px, 6px 3px, 12px 2px, 12px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; }
75% {
background-position: 0px 3px, 0px 3px, 6px 3px, 6px 3px, 12px 3px, 12px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; }
87% {
background-position: 6px 3px, 6px 3px, 12px 3px, 12px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; }
100% {
background-position: 12px 3px, 12px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; } }
@-webkit-keyframes wait {
12% {
background-position: -4px 3px,-4px 3px, -4px 3px, -4px 3px, -4px 3px,-4px 3px, -4px 2px,-4px 2px, -4px 0px, -4px 0px, 0px 0px, 0px 0px; }
25% {
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px,-4px 3px, -4px 2px, -4px 2px, 0px 0px, 0px 0px, 6px 0px, 6px 0px; }
37% {
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, 0px 2px, 0px 2px, 6px 0px, 6px 0px, 12px 0px, 12px 0px; }
50% {
background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, 0px 3px, 0px 3px, 6px 2px, 6px 2px, 12px 0px, 12px 0px, -4px 0px, -4px 0px; }
62% {
background-position: -4px 3px, -4px 3px, 0px 3px, 0px 3px, 6px 3px, 6px 3px, 12px 2px, 12px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; }
75% {
background-position: 0px 3px, 0px 3px, 6px 3px, 6px 3px, 12px 3px, 12px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; }
87% {
background-position: 6px 3px, 6px 3px, 12px 3px, 12px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; }
100% {
background-position: 12px 3px, 12px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px; } }