UNPKG

vim-webgl-component

Version:

A demonstration app built on top of the vim-webgl-viewer

168 lines (159 loc) 2.93 kB
.vim-measure { background-color: white; } .vim-measure table { border-collapse: collapse; } .vim-measure table tr { border: 1px solid; border-color: black; } .vim-measure-label-d, .vim-measure-label-x, .vim-measure-label-y, .vim-measure-label-z { color: white; width: 10px; text-align: center; padding: 5px; } .vim-measure-label-d { background-color: black; } .vim-measure-label-x { background-color: red; } .vim-measure-label-y { background-color: green; } .vim-measure-label-z { background-color: blue; } .vim-measure-value-d, .vim-measure-value-x, .vim-measure-value-y, .vim-measure-value-z { text-align: center; padding: 5px; } .lds-roller { display: block; top: 10px; left: 10px; position: absolute; width: 20px; height: 20px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 20px 20px; } .lds-roller div:after { content: ' '; display: block; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #40a6de; margin: -4px 0 0 -4px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 32px; left: 32px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 35px; left: 28px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 37px; left: 24px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 38px; left: 20px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 37px; left: 16px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 35px; left: 12px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 32px; left: 8px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 28px; left: 5px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { width: 100%; height: 4px; display: block; top: 0px; position: absolute; overflow: hidden; } .loader::after { content: ''; width: 30%; height: 4.8px; background: linear-gradient( to right, #40a6de00 0%, #40a6deff 20%, #40a6deff 80%, #40a6de00 100% ); position: absolute; top: 0; left: 0; box-sizing: border-box; animation: animloader 2s linear infinite; } @keyframes animloader { 0% { left: 0; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(0%); } }