.preloader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
}
.load-1
{
    position: relative;
    height: 100%;
    width: 50%;
    background-color: #111;
    transition: 1.5s ease;
    z-index: 9998;
}
.right-side
{
    position: absolute;
    right: 0;
    top: 0;
}
.load-1 span
{
    color: silver;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.left-side span
{
    right: 0;
}
.right-side span
{
    left: 0;
}
.dot
{
    height: 7px;
    width: 7px;
    border-radius: 100%;
    position: absolute;
    top: 53%;
}
@keyframes dot-light
{
    100%
    {
        background-color: #c22407;
        box-shadow: 0 0 10px #c22407, 0 0 10px #c22407;
    }
}
.dot-1
{
    right: 20px;
}
.dot-2
{
    right: 5px;
}
.dot-3
{
    left: 5px;
}
.dot-4
{
    left: 20px;
}
.load-2
{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #222;
    z-index: 9997;
    transition: 1s;
}
.load-3
{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #c22407;
    z-index: 9996;
    transition: 1s;
}
.load-4
{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #444;
    z-index: 9995;
    transition: 1s;
}