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%");
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
ReplyDeletethank you
DeleteThis 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
ReplyDeleteIncredible review, I'm certain you're getting an extraordinary reaction. Buy Gmail Accounts
ReplyDeleteThis is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post. Buy Gmail Accounts
ReplyDeleteProfessional Creative Assignment Writing Services is very popular for students in search of creative essay writing services and custom creative writing services.
ReplyDeleteI use backwards-facing accessories however I understand that we live in a movable apple, and that you might be in a hurry to complete the most enjoyable sessions. Whatever the occasion, whether it a trip, an independent ludhiana elegant models banquet event or just a casual meeting, my intention is to make sure we both have an unforgettable experience.
ReplyDeletewhat's app jalandhar girls number.
what's app amritsar girls number.
what's app Chandigarh girls number.
what's app Pathankot girls number.
what's app Mohali girls number.
what's app Ludhiana girls number.