UNPKG

webgme

Version:

Web-based Generic Modeling Environment

66 lines (49 loc) 5.27 kB
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; } }