Cacher is the code snippet organizer for pro developers

/*
http://qaru.site/questions/75062/control-the-dashed-border-stroke-length-and-distance-between-strokes
Подготавливаем изображение
Пример dropbox/documents/starliner/border-dashed/loader-border.png
*/
.broadcast_loader {
    /*display: none;*/
    border: 4px dashed #e3e3e3; /* Для старых браузеров */
    background-color: #fff;
    height: 100px;
    border-image-source: url('/modules/broadcast/images/loader-border.png');
    border-image-slice: 4;
    border-image-repeat: round;
}

  .eclipse_text { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

<img src="http://placehold.it/750x350" alt="">
html,
body {
    height: 100%;
}
img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

/* <progress class="broadcast_loader_progress_line" max="22150413" value="22150413" id="broadcast_loader_progress_line"></progress> */
.broadcast_loader_progress_line {
    color: #96b7d7;
    background-color: #ebebeb;
    width: 80%;
    height: 8px;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*appearance: none;*/
    border: none;
    border-radius: 50px;
}

/* WebKit, Blink */
.broadcast_loader_progress_line::-webkit-progress-bar {
    background-color: #ebebeb;
    border-radius: 50px;
}

/* WebKit, Blink */
.broadcast_loader_progress_line::-webkit-progress-value {
    background-color: #96b7d7;
    border-radius: 50px;
}

/* Gecko, Firefox */
.broadcast_loader_progress_line::-moz-progress-bar {
    background-color: #96b7d7;
    border-radius: 50px;
}