Nos partenaires et nous-mêmes utilisons différentes technologies, telles que les cookies, pour personnaliser les contenus et les publicités, proposer des fonctionnalités sur les réseaux sociaux et analyser le trafic. Merci de cliquer sur le bouton ci-dessous pour donner votre accord. Vous pouvez changer d’avis et modifier vos choix à tout moment. Informations RGPD
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>cadwork webviewer model</title> <meta name="description" content=" cadwork webviewer model"> <meta name="author" content="www.cadwork.com"> <meta meta name="apple-mobile-web-app-capable" content="yes"> <link rel="icon" type="image/icon" href="../favicon.ico"> <style id="app_css"> /* RESET */ #cadworkWebglCanvas.App3D html {color:#000;background:#FFF;} #cadworkWebglCanvas.App3D body, #cadworkWebglCanvas.App3D div, #cadworkWebglCanvas.App3D dl, #cadworkWebglCanvas.App3D dt, #cadworkWebglCanvas.App3D dd, #cadworkWebglCanvas.App3D ul, #cadworkWebglCanvas.App3D ol, #cadworkWebglCanvas.App3D li, #cadworkWebglCanvas.App3D h1, #cadworkWebglCanvas.App3D h2, #cadworkWebglCanvas.App3D h3, #cadworkWebglCanvas.App3D h4, #cadworkWebglCanvas.App3D h5, #cadworkWebglCanvas.App3D h6, #cadworkWebglCanvas.App3D pre, #cadworkWebglCanvas.App3D code, #cadworkWebglCanvas.App3D form, #cadworkWebglCanvas.App3D fieldset, #cadworkWebglCanvas.App3D legend, #cadworkWebglCanvas.App3D input, #cadworkWebglCanvas.App3D textarea, #cadworkWebglCanvas.App3D p, #cadworkWebglCanvas.App3D blockquote, #cadworkWebglCanvas.App3D th, #cadworkWebglCanvas.App3D td {margin:0;padding:0;} #cadworkWebglCanvas.App3D table {border-collapse:collapse;border-spacing:0;} #cadworkWebglCanvas.App3D fieldset, #cadworkWebglCanvas.App3D img {border:0;} #cadworkWebglCanvas.App3D address, #cadworkWebglCanvas.App3D caption, #cadworkWebglCanvas.App3D cite, #cadworkWebglCanvas.App3D code, #cadworkWebglCanvas.App3D dfn, #cadworkWebglCanvas.App3D em, #cadworkWebglCanvas.App3D strong, #cadworkWebglCanvas.App3D th, #cadworkWebglCanvas.App3D var {font-style:normal;font-weight:normal;} #cadworkWebglCanvas.App3D li {list-style:none;} #cadworkWebglCanvas.App3D caption, #cadworkWebglCanvas.App3D th {text-align:left;} #cadworkWebglCanvas.App3D h1, #cadworkWebglCanvas.App3D h2, #cadworkWebglCanvas.App3D h3, #cadworkWebglCanvas.App3D h4, #cadworkWebglCanvas.App3D h5, #cadworkWebglCanvas.App3D h6 {font-size:100%;font-weight:normal;} #cadworkWebglCanvas.App3D q:before, #cadworkWebglCanvas.App3D q:after {content:'';} #cadworkWebglCanvas.App3D abbr, #cadworkWebglCanvas.App3D acronym {border:0;font-variant:normal;} #cadworkWebglCanvas.App3D sup {vertical-align:text-top;} #cadworkWebglCanvas.App3D sub {vertical-align:text-bottom;} #cadworkWebglCanvas.App3D input, #cadworkWebglCanvas.App3D textarea, #cadworkWebglCanvas.App3D select {font-family:inherit;font-size:inherit;font-weight:inherit;} #cadworkWebglCanvas.App3D input, #cadworkWebglCanvas.App3D textarea, #cadworkWebglCanvas.App3D select {font-size:100%;} #cadworkWebglCanvas.App3D legend {color:#000;} *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* RESET END */ #cadworkWebglCanvas.App3D :focus{ outline: none; } #cadworkWebglCanvas.App3D .cwhidden{ display: none; } /* Test mode class, visible only when set on in Core. */ #cadworkWebglCanvas.App3D .testMode { display: none; } /* tb note: from now on there should be #cadworkWebglWrapper instead of #cadworkWebglCanvas */ /* tb: todo really? */ #cadworkWebglCanvas.App3D :link, #cadworkWebglCanvas.App3D :visited{ text-decoration: none; } /* Note: this id is id of x3d tag in our page. Since it is not a valid HTML tag and we are creating it, there could be (we saw them) problems with styling it sometimes. In that case try to style 'x3d' instead of '#cadworkWebglCanvas'. Case sensitive. */ #cadworkWebglCanvas.App3D { width: 100%; height: 100%; border: none; background-color: #666666; font-size: 12px; cursor: default; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; font-family: Helvetica, sans-serif; } #cadworkWebglCanvas.App3D #x3dom-cadworkWebglCanvas-canvas{ cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIhJREFUeNqUU0EOgDAIE8L/v4xiMlMROuS2lQKlm7j7gSEi74sUV75gjmCBBeSigGOh+6xTMmKYY1UCdmLkTwEkh1acLu6r6XRCZtIMt7vTTguwqHbyYNFg5zvDber7bwkVGV/gmkwZeeKGdVuPIvlfVFItd+5eXCdNM0Atq6ShjfmrTmw9BRgAb0pjIquJJZgAAAAASUVORK5CYII="), default; } #cadworkWebglCanvas.App3D #inactiveOverlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; /* background-color: rgba(100, 100, 100, 0.6); */ background-color: #000; opacity: 0.6; z-index: 222; } #cadworkWebglCanvas.App3D #errorConsole{ position: absolute; bottom: 0; left: 0; right: 0; height: 15em; z-index: 150; background-color: white; border: 3px solid #d4d0c8; } #cadworkWebglCanvas.App3D #errorConsole h1{ position: absolute; top: 0.1em; left: 0.1em; right: 0.1em; height: 1.6em; background-color: #78b7ff; font-weight: bold; padding: 0.3em 0 0 0.5em; } #cadworkWebglCanvas.App3D #errorConsole #consoleContent{ overflow-y: scroll; height: calc(100% - 2em); margin: 2em 0 0 1em; } #cadworkWebglCanvas.App3D .closeCross { width: 1em; height: 1em; float: right; margin-right: 0.2em; cursor: pointer; } #cadworkWebglCanvas.App3D .button{ width: 5em; padding: 0.2em 0 0.1em 0; background-color: #d4d0c8; text-align: center; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; } #cadworkWebglCanvas.App3D .button:hover, #cadworkWebglCanvas.App3D .button:active{ border: 1px solid rgba(0, 0, 0, 0.6); } /* --- Global stuff --- */ #cadworkWebglCanvas.App3D #x3dom-nox3d{ display: none; } #cadworkWebglCanvas.App3D .invisible{ display: none !important; } /* Dialogs */ #cadworkWebglCanvas.App3D .dialog { position: absolute; width: 60em; margin-left: -30em; left: 50%; top: 25%; margin-top: -8em; background-color: white; color: #383838; z-index: 210; overflow: hidden; box-shadow: 0px 0px 15px 0px rgba(34, 34, 34, 0.6); font-size: 12px; line-height: 1em; user-select: text; } #cadworkWebglCanvas.App3D .dialog .dialogWrapper { display: flex; flex-direction: column; width: 100%; height: 100%; } #cadworkWebglCanvas.App3D .dialogWrapper p { margin-bottom: 1em; } #cadworkWebglCanvas.App3D .dialogWrapper .dialogTitle, #cadworkWebglCanvas.App3D .dialogWrapper h1 { font-weight: bold; font-size: 1.2em; margin: 0; text-align: center; padding: 0.5em 1em; background-color: #1E90FF; color: #fff; flex-shrink: 0; } #cadworkWebglCanvas.App3D .dialogWrapper h1:hover { background-color: #0169CE; transition: background-color .3s ease-out; } #cadworkWebglCanvas.App3D .dialogWrapper h3 { font-weight: normal; font-size: 100%; } #cadworkWebglCanvas.App3D .dialogWrapper div :not(.raisedButton), #cadworkWebglCanvas.App3D .dialogWrapper p, #cadworkWebglCanvas.App3D .dialogWrapper input, #cadworkWebglCanvas.App3D .dialogWrapper select, #cadworkWebglCanvas.App3D .dialogWrapper textarea { color: #383838; } #cadworkWebglCanvas.App3D .dialogWrapper .dialogContentWrapper { margin: 0; padding: 1em; /*height: calc(100% - 5em);*/ /* remove footer */ overflow-y: auto; bottom: 3em; margin-bottom: 3em; } #cadworkWebglCanvas.App3D .dialogWrapper h2, #cadworkWebglCanvas.App3D .dialogWrapper th { font-size: 110%; font-weight: bold; margin-top: 1em; margin-bottom: 0.5em; } #cadworkWebglCanvas.App3D .dialogWrapper .dialogContentWrapper .flatButton { margin: 1em 0 0 0; } #cadworkWebglCanvas.App3D .dialog.leftSide { margin-left: -8em; left: 10%; } #cadworkWebglCanvas.App3D footer { margin: 0 0 0 0; width: 100%; height: 3em; text-align: right; padding: 0 0.3em; line-height: 3em; clear: both; flex-shrink: 0; background-color: #fafafa; position: absolute; bottom: 0; } #cadworkWebglCanvas.App3D .dialogWrapper p #reason { margin-top: 1em; } #cadworkWebglCanvas.App3D .dialogWrapper p #reason li { list-style-type: disc; margin-left: 2em; } #cadworkWebglCanvas.App3D .flatButton, #cadworkWebglCanvas.App3D .flatLink, #cadworkWebglCanvas.App3D .link, #cadworkWebglCanvas.App3D footer .flatButton, #cadworkWebglCanvas.App3D .dialog footer .flatButton, #cadworkWebglCanvas.App3D .errorMessage footer .flatButton { height: 2em; padding: 0 0.3em; margin: 0 0.3em; text-transform: uppercase; line-height: 2em; width: auto; min-width: 3em; display: inline-block; color: #1E90FF !important; text-align: center; } #cadworkWebglCanvas.App3D .dialogWrapper .link, #cadworkWebglCanvas.App3D .dialogWrapper .flatLink { margin: 0; color: #1E90FF !important; text-transform: none; text-align: left; } #cadworkWebglCanvas.App3D .dialogWrapper .raisedButton { margin-bottom: 1em; } #cadworkWebglCanvas.App3D .link { text-transform: none; margin: 0; padding: 0; } #cadworkWebglCanvas.App3D .flatButton:hover, #cadworkWebglCanvas.App3D .flatLink:hover, #cadworkWebglCanvas.App3D .link:hover{ background-color: #e7e3db; transition: background-color .2s ease-out; } #cadworkWebglCanvas.App3D .raisedButton { height: 2.5em; line-height: 2.5em; width: auto; min-width: 3em; padding: 0 1.0em; margin: 0 0.3em; text-transform: uppercase; display: inline-block; color: #fff; background-color: #1E90FF; text-align: center; border-radius: 2px; cursor: pointer; position: relative; user-select: none; } #cadworkWebglCanvas.App3D .raisedButton img { height: 100%; } #cadworkWebglCanvas.App3D .noselect, #cadworkWebglCanvas.App3D .raisedButton img, #cadworkWebglCanvas.App3D .raisedButton { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera; 01-2017 */ } #cadworkWebglCanvas.App3D .raisedButton:hover { background-color: #0169CE; transition: background-color .3s ease-out; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } #cadworkWebglCanvas.App3D .raisedButton.raised { /*transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);*/ /*transition-delay: 0.2s;*/ /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);*/ } #cadworkWebglCanvas.App3D .raisedButton.raised:active { /*box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);*/ /*transition-delay: 0s;*/ } #cadworkWebglCanvas.App3D .raisedButton.oneColumn { float: left; } #cadworkWebglCanvas.App3D .horizontalFlip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } /* -- The switch button component with text label aligned -- */ #cadworkWebglCanvas.App3D .switchWrap { height: 2em; display: flex; align-items: center; margin-bottom: 1em; } #cadworkWebglCanvas.App3D .switchWrap .switchText { margin-right: 1em; } #cadworkWebglCanvas.App3D .switch { display: inline-block; width: 4em; height: 2em; } #cadworkWebglCanvas.App3D .switch input { display: none; } #cadworkWebglCanvas.App3D .switch .slider { outline: 0; display: block; width: 4em; height: 2em; position: relative; cursor: pointer; user-select: none; background: #B4B4B4; padding: 2px; transition: all .4s ease; } #cadworkWebglCanvas.App3D .switch .slider:before, #cadworkWebglCanvas.App3D .switch .slider:after { position: relative; display: block; content: ""; width: 50%; height: 100%; } #cadworkWebglCanvas.App3D .switch .slider:after { left: 0; background: #fff; transition: all .2s ease; } #cadworkWebglCanvas.App3D .switch .slider:before { display: none; } #cadworkWebglCanvas.App3D .switch input:checked + .slider { background: #1E90FF; } #cadworkWebglCanvas.App3D .switch input:checked + .slider:after { left: 50%; } /* Rounded */ #cadworkWebglCanvas.App3D .switch .slider.round { border-radius: 2em; } #cadworkWebglCanvas.App3D .switch .slider.round:after { border-radius: 50%; } /* -- The slider component with text label aligned -- */ #cadworkWebglCanvas.App3D .sliderWrap { display: flex; align-items: center; } #cadworkWebglCanvas.App3D .sliderWrap label { margin-left: 0.5em; } #cadworkWebglCanvas.App3D .disabled, #cadworkWebglCanvas.App3D .dialog .disabled * { background-color: #B4B4B4; pointer-events: none; } #cadworkWebglCanvas.App3D .disabledOverlay:before { background-color: rgba(180,180,180,0.2); pointer-events: none; } /* -- Mocha test framework -- */ #mocha-stats { top: 5px; right: 10px; font-size: 12px; margin: 0; color: #888; z-index: 1000; background-color: #ffe152; } /* /////////////////////////////// */ /* presentation controls item containers */ #cadworkWebglCanvas.App3D .present-item-container { position: absolute; bottom: calc(1em + 30px + 5px); /*left: 1em;*/ min-width: 10em; max-height: 30em; height: 0; padding: 0; cursor: pointer; z-index: 93; } #cadworkWebglCanvas.App3D .present-item-list { width: 100%; height: 100%; } #cadworkWebglCanvas.App3D .present-item-list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); border-radius: 4px; background-color: #000; } #cadworkWebglCanvas.App3D .present-item-list::-webkit-scrollbar { border-top-right-radius: 4px; width: 8px; background-color: #000; } #cadworkWebglCanvas.App3D .present-item-list::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3); background-color: #fff; } #cadworkWebglCanvas.App3D .present-item-container .present-item-list, #cadworkWebglCanvas.App3D .present-item-container .present-item-extra { border-radius: 4px; background-color: #000; opacity: 0.75; color: #fff; width: 100%; height: 100%; padding: 4px; } #cadworkWebglCanvas.App3D .present-item-container .present-item-list { border-bottom-right-radius: 0; border-bottom-left-radius: 0; max-height: 30em; overflow: auto; } #cadworkWebglCanvas.App3D .present-item-container .present-item-extra { border-top-right-radius: 0; border-top-left-radius: 0; border-top: 1px solid #666; height: initial; } #cadworkWebglCanvas.App3D .present-item-container .present-item-list li, #cadworkWebglCanvas.App3D .present-item-container .present-item-extra li { border-radius: 4px; display: block; padding: 4px 6px; color: #fff; height: 20px; font-size: 12px; line-height: 12px; width: 100%; overflow: hidden; } #cadworkWebglCanvas.App3D .present-item-container .present-item-list li:hover, #cadworkWebglCanvas.App3D .present-item-container .present-item-extra li:hover { /*http://www.color-hex.com/color/1e90ff - dodgerblue */ background-color: #1e90ff; color: #fff; } #cadworkWebglCanvas.App3D .present-item-container .present-item-list li span { display: inline-block; } #cadworkWebglCanvas.App3D .present-item-container .present-item-list li .itemId, #cadworkWebglCanvas.App3D .present-item-container .present-item-list li span:first-child { margin-right: 1em; text-align: right; width: 1em; } #cadworkWebglCanvas.App3D .selectDialog { position: absolute; color: #fff; top: 50%; left: 50%; width: 24em; height: 18em; min-height: 8em; margin: -4em 0 0 -12em; border-radius: 5px; z-index: 2300; } #cadworkWebglCanvas.App3D .selectDialog h1 { border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(30, 144, 255, 1); color: white; font-weight: bold; padding: 0.5em; text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 1.15em; } #cadworkWebglCanvas.App3D .selectDialog .present-item-container { width: 100%; height: 100%; position: inherit; bottom: inherit; min-width: inherit; max-height: inherit; padding: inherit; cursor: pointer; border-radius: 5px; border-top-right-radius: 0; border-top-left-radius: 0; } #cadworkWebglCanvas.App3D .selectDialog .present-item-container .present-item-list { border-radius: 0; } /* /////////////////////////////// */ #cadworkWebglCanvas.App3D .hudButton, #cadworkWebglCanvas.App3D .hudRoundButton { background-color: rgba(0,0,0,0.8); color: #fff; opacity: 0.8; } #cadworkWebglCanvas.App3D .hudRoundButton { width: 3.5em; height: 3.5em; margin: 0; border-radius: 2em; text-align: center; } #cadworkWebglCanvas.App3D .hudExitButton { position: absolute; top: -4em; right: 1em; } #cadworkWebglCanvas.App3D .hudRoundButton img { color: #fff; margin: 0.75em; width: 2em; height: 2em; } #cadworkWebglCanvas.App3D .settingsTable { border-collapse: collapse; border: none; margin-right: 0; width: 100%; } #cadworkWebglCanvas.App3D .settingsTable tr { width: 100%; } #cadworkWebglCanvas.App3D .settingsTable th, #cadworkWebglCanvas.App3D .settingsTable td { padding: 0.25em; text-align: left; vertical-align: middle; word-wrap: break-word; white-space: normal; } #cadworkWebglCanvas.App3D .settingsTable > tbody > tr > td:nth-child(1) { width: 8em; min-width: 8em; white-space: nowrap; word-wrap: break-word; overflow: visible; } #cadworkWebglCanvas.App3D .settingsTable .switchWrap { margin: 0; } #cadworkWebglCanvas.App3D .settingsTable input[type=range], #cadworkWebglCanvas.App3D .settingsTable input[type=text] { width: 14em; } #cadworkWebglCanvas.App3D .settingsTable input[type=number] { width: 5em; } #cadworkWebglCanvas.App3D .settingsTable select { text-overflow: ellipsis; } @media screen and (max-width: 812px) { /* iPhone X landscape mode, longer side */ #cadworkWebglCanvas.App3D .dialog { /*position: relative !important;*/ height: calc(100% - 3em) !important; width: 50% !important; left: 0 !important; right: 0 !important; top: 3em !important; margin: 0 !important; } #cadworkWebglCanvas.App3D .dialog h1 { font-size: 110% !important; pointer-events: none !important; /* disable draggable dialog options */ } #cadworkWebglCanvas.App3D .dialog h3 { font-size: 100% !important; } #cadworkWebglCanvas.App3D .dialog.quarterSized { /* only quarter size of the screen */ width: 25% !important; } #cadworkWebglCanvas.App3D .settingsTable > tbody > tr > td:not(:last-child) { padding-right: 0.25em; } #cadworkWebglCanvas.App3D .settingsTable > tbody > tr > td:nth-child(1) { width: auto; min-width: auto; padding-right: 0.5em; } #cadworkWebglCanvas.App3D .settingsTable td { padding: 0.5em 0; } #cadworkWebglCanvas.App3D .settingsTable input[type=range], #cadworkWebglCanvas.App3D .settingsTable select { max-width: 100%; } #cadworkWebglCanvas.App3D .settingsTable input[type=text] { width: 100%; } } @media screen and (max-width: 375px) { /* Portrait mode */ #cadworkWebglCanvas.App3D .dialog, #cadworkWebglCanvas.App3D .dialog.quarterSized { width: 100% !important; } } #cadworkWebglCanvas.App3D .errorMessage { position: absolute; width: 60em; height: auto; margin-left: -30em; left: 50%; top: 35%; margin-top: -8em; background-color: white; z-index: 230; overflow: hidden; } #cadworkWebglCanvas.App3D .errorMessage h1/*, #cadworkWebglCanvas.App3D .errorMessage p, #cadworkWebglCanvas.App3D .errorMessage div*/ { margin: 0 1em 1em 1em; } #cadworkWebglCanvas.App3D .errorMessage h1 { font-weight: bold; font-size: 140%; margin-top: 1em; } #cadworkWebglCanvas.App3D .errorMessage p, #cadworkWebglCanvas.App3D .errorMessage div { /*color: #B4B4B4;*/ color: #383838; font-size: 120%; line-height: 1.25em; margin: 0 0em 1em 0em; } #cadworkWebglCanvas.App3D .errorMessage .dialogContentWrapper { margin: 0; padding: 1em 1em 3em 1em; height: calc(100% - 7em); /* remove footer */ overflow-y: auto; bottom: 3em; } /*#cadworkWebglCanvas.App3D .errorMessage footer div:hover {*/ /*background-color: #e7e3db;*/ /*}*/ #cadworkWebglCanvas.App3D .errorMessage div #reason { margin-top: 1em; } #cadworkWebglCanvas.App3D .errorMessage div #reason li { list-style-type: disc; margin-left: 2em; } #cadworkWebglCanvas.App3D .errorMessage #feedbackEmail { height: 2.5em; width: 20em; padding: 0.2em; } @media screen and (max-width: 667px) { #cadworkWebglCanvas.App3D .errorMessage { margin: 0; top: 1em; left: 1em; right: 1em; bottom: 1em; width: auto; } #cadworkWebglCanvas.App3D .errorMessage h1 { font-size: 120%; } #cadworkWebglCanvas.App3D .errorMessage p, #cadworkWebglCanvas.App3D .errorMessage div { font-size: 100%; } #cadworkWebglCanvas.App3D .errorMessage #feedbackEmail { height: 2.5em; width: 100%; padding: 0.2em; } #cadworkWebglCanvas.App3D .errorMessage #sendFeedback { float: right; margin-top: 0.5em; margin-right: 0; } #cadworkWebglCanvas.App3D .errorMessage .feedbackHead { margin-top: 3em; } } #cadworkWebglCanvas.App3D #progressBar { background-color: #aaa; overflow: hidden; position: absolute; z-index: 1000; width: 400px; top: 50%; left: 50%; margin-left: -200px; height: 24px; border: 1px solid #fff; border-radius: 0; box-shadow: 0px 0px 15px 0px rgba(34, 34, 34, 0.6); } #cadworkWebglCanvas.App3D #progressBar #bar { background-color: #1E90FF; /* #1E90FF; */ color: #fff; text-align: center; height: 100%; width: 0; background-image: none; z-index: 1001; } #cadworkWebglCanvas.App3D #progressBarMessage { color: #fff; position: relative; bottom: 20px; overflow: hidden; z-index: 1002; width: 100%; height: 24px; } #cadworkWebglCanvas.App3D #progressBarMessage div { text-align: center; line-height: 20px; /* same as #progressBar height without borders if we want text middle aligned */ height: 100%; width: 100%; } #cadworkWebglCanvas.App3D #progressBar.meter img { display: none; } #cadworkWebglCanvas.App3D #progressBar.meter #bar { color: #fff; text-align: center; line-height: 24px; height: 100%; width: 100%; background-image: none; z-index: 210; } #cadworkWebglCanvas.App3D #progressBar.infinite #bar { width: 100%; height: 100%; background-image: repeating-linear-gradient( -45deg, #1E90FF, #1E90FF, #aaa 10px, #aaa 20px ); background-size: 28px 28px; animation: progressBarMove .8s linear infinite; } @keyframes progressBarMove { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } } #cadworkWebglCanvas.App3D #progressBar.splash { width: 450px; height: 300px;