CSS: How do I create a spinning 'loading' icon using an image

The icon can be created using the following simple classes

.loading{background:url(../img/loading-purple.gif) no-repeat center}
.loading > div{display:none}

Here is a sample image that could be used.



Too easy. However, this is old school. You can create a simpler one using CSS and HTML5.

Here is the CSS:
.loading-container{display:block;width:100%;min-height:45%;margin-top:60px;text-align:center}
.loader {margin:0 auto;text-align:center;width:200px;min-height:100%;display:block;vertical-align:middle}
.loader:hover{opacity:1}
.loading-spinning-bubbles{position:relative;margin:auto;min-height:1px}
.loading-spinning-bubbles .bubble-container {position:absolute;top:calc(50% - 10px/2);left:calc(50% - 10px/2);transform-origin:-150% 50%;-webkit-transform-origin:-150% 50%;-moz-transform-origin:-150% 50%}
.loading-spinning-bubbles .bubble-container .bubble {background:#00ac00;width:10px;height:10px;border-radius:50%;animation:bubble 1s infinite;-webkit-animation:bubble 1s infinite;-moz-animation:bubble 1s infinite;animation-delay:inherit;-webkit-animation-delay:inherit;-moz-animation-delay:inherit}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+1) {transform:translateX(200%) rotate(-90deg);-moz-transform:translateX(200%) rotate(-90deg); -webkit-transform:translateX(200%) rotate(-90deg);animation-delay:-1.5s;-webkit-animation-delay:-1.5s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+2) {transform:translateX(200%) rotate(-45deg);-moz-transform:translateX(200%) rotate(-45deg); -webkit-transform:translateX(200%) rotate(-45deg) ;animation-delay:-1.375s;-webkit-animation-delay:-1.375s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+3) {transform:translateX(200%);-moz-transform:translateX(200%); -webkit-transform:translateX(200%);animation-delay:-1.25s;-webkit-animation-delay:-1.25s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+4) {transform:translateX(200%) rotate(45deg);-moz-transform:translateX(200%) rotate(45deg); -webkit-transform:translateX(200%) rotate(45deg);animation-delay:-1.125s;-webkit-animation-delay:-1.125s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+5) {transform:translateX(200%) rotate(90deg);-moz-transform:translateX(200%) rotate(90deg); -webkit-transform:translateX(200%) rotate(90deg);animation-delay: -1s;-webkit-animation-delay:-1s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+6) {transform:translateX(200%) rotate(135deg);-moz-transform:translateX(200%) rotate(135deg); -webkit-transform:translateX(200%) rotate(135deg);animation-delay:-0.875s;-webkit-animation-delay:-0.875s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+7){transform:translateX(200%) rotate(180deg);-moz-transform:translateX(200%) rotate(180deg); -webkit-transform:translateX(200%) rotate(180deg);animation-delay:-0.75s;-webkit-animation-delay:-0.75s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+8){transform:translateX(200%) rotate(225deg);-moz-transform:translateX(200%) rotate(225deg); -webkit-transform:translateX(200%) rotate(225deg);animation-delay:-0.625s;-webkit-animation-delay:-0.625s}

And an HTML code snippet (using angular)

<div class="loading-container" ng-show="isProcessing">
    <div class="loader">
        <div class="loading-spinning-bubbles">
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
        </div>
    </div>
    <p class="loading-text">Loading...</p>
</div>

​

Comments

Post a Comment

Popular posts from this blog

SharePoint 2013: Error updating managed account credentials

I encountered the following message when trying to change a password for a managed account: Error deploying administration application pool credentials. Another deployment may be active. An object of the type Microsoft.SharePoint.Administration.SPAdminAppPoolCredentialDeploymentJobDefinition named "job-admin-apppool-change" already exists under the parent Microsoft.SharePoint.Administration.SPTimerService named "SPTimerV4".  Rename your object or delete the existing object. The error message is self explanatory - Rename your object or delete the existing object.  I choose the latter. Powershell to the rescue. $job = Get-SPTimerJob -Identity "job-admin-apppool-change" $job.Delete() Reset the password and all should be good.
Read more

Error deploying Nintex workflow: An item with the same key has already been added

My client recently upgraded their version of Nintex Workflow 2010 and suddenly some of my workflows started to fail on deployment. The following error cropped up: Error deploying workflow: Server was unable to process request. ---> An item with the same key has already been added. ---> An item with the same key has already been added. WTF???? A little digging unveiled the problem - I had two items in a 'Create Item' shape with the SAME DISPLAYNAME. I needed to move the second item to a new 'Update Item' shape in order for it to work. I order to get the workflow to deploy, I had to manually remove the 'duplicate' item from the serialized XML. Hooray!! It was then a simple matter of creating a new shape to update the 'duplicate' value.
Read more