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 :

Here "progess-view" is for display progress in percentage. "progress" is the bar of progress.

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

CSS :

.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;
    }
}

Script :

$(".progress").css("max-width","10%");
$(".progress-view").text("10%");

3 comments:

  1. Suggestion for your site: You should reduce z-index value for popup image for lightbox effect. Currently top horizontal menu is appearing which is not looking nice

    ReplyDelete
  2. This challenge behind this technical glitch becomes even more difficult as it is completely dependent on the platform used by the user, and hence such issues cannot be reproduced from the end of the technical experts. In order to better cater such issues, the Gmail Customer Support team has introduced the option of a remote assistant. click here

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts