ng2-3d-editor/src/components/viewer3D.component.css

Angular 2 3D Editor/viewer

.viewer-3d-content {
    font-family: Monospace;
    background-color: #000;
    color: #fff;
    margin: 0px;
    overflow: hidden;
}

.viewer-3d-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    align-items: center;
}

.viewer-3d-cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;

    padding: 10px;
    margin: 10px;

    text-align: center;
}

.viewer-3d {
    height: 80vh;
    max-width: 100%;
}

.loader-container{
    width: 200px;
    height: 200px;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}

.loader{
    background:#333;
 }

h1{
    font-family: 'Actor', sans-serif;
    color:#FFF;
    font-size:16px;
    letter-spacing:1px;
    font-weight:200;
    text-align:center;
}
.loader span{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    position:absolute;
    left:50%;
    margin-left:-10px;
    -webkit-animation:3s infinite linear;
    -moz-animation:3s infinite linear;
    -o-animation:3s infinite linear;

}


.loader span:nth-child(2){
    background:#E84C3D;
    -webkit-animation:kiri 1.2s infinite linear;
    -moz-animation:kiri 1.2s infinite linear;
    -o-animation:kiri 1.2s infinite linear;

}
.loader span:nth-child(3){
    background:#F1C40F;
    z-index:100;
}
.loader span:nth-child(4){
    background:#2FCC71;
    -webkit-animation:kanan 1.2s infinite linear;
    -moz-animation:kanan 1.2s infinite linear;
    -o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }

    50%{-webkit-transform:translateX(-20px);
    }

    100%{-webkit-transform:translateX(20px);
        z-index:200;
    }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }

    50%{-moz-transform:translateX(-20px);
    }

    100%{-moz-transform:translateX(20px);
        z-index:200;
    }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }

    50%{-o-transform:translateX(-20px);
    }

    100%{-o-transform:translateX(20px);
        z-index:200;
    }
}




@-webkit-keyframes kiri {
    0% {-webkit-transform:translateX(-20px);
        z-index:200;
    }
    50%{-webkit-transform:translateX(20px);
    }
    100%{-webkit-transform:translateX(-20px);
    }
}

@-moz-keyframes kiri {
    0% {-moz-transform:translateX(-20px);
        z-index:200;
    }
    50%{-moz-transform:translateX(20px);
    }
    100%{-moz-transform:translateX(-20px);
    }
}
@-o-keyframes kiri {
    0% {-o-transform:translateX(-20px);
        z-index:200;
    }
    50%{-o-transform:translateX(20px);
    }
    100%{-o-transform:translateX(-20px);
    }
}