SodhanaLibrary

Gmail progress-bar has thin beautiful view and it is appropriate for showing progress while uploading files or images both in Desktop and mobiles.

Markup :

<div class="g-div">
    Loading <span class="progress-view">0%</span>
    <div class="loader-gmail">
        <div class="progress"></div>
    </div>
</div>

.g-div {
    position: absolute;
    top: calc(50% -   6px);
    left: calc(50% -   160px);
    text-align: center;
    width: 320px;
    font-weight: bold;
}

.loader-gmail {
    padding: 1px;
    overflow: hidden;
    border: 1px solid #a4a4a4;
}

.progress {
    width: 320px;
    height: 8px;
    background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da
        50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%);
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: 16px 16px;
    background-clip: content-box;
    animation: loading 1s linear infinite;
    -o-animation: loading 1s linear infinite;
    -moz-animation: loading 1s linear infinite;
    -webkit-animation: loading 1s linear infinite;
}

@keyframes loading {
    from { 
      background-position:0px 0px;  
    }
    to {
      background-position: -16px 0px;
    }
}
@-webkit-keyframes loading {
    from { 
      background-position:0px 0px;  
    }
    to {
      background-position: -16px 0px;
    }
}
@-moz-keyframes loading {
    from { 
      background-position:0px 0px;  
    }
    to {
      background-position: -16px 0px;
    }
}
@-o-keyframes loading { 
    from { 
      background-position:0px 0px;  
    }
    to {
      background-position: -16px 0px;
    }
}