Wednesday, 26 October 2016

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>

Wednesday, 19 October 2016

Web API: How do I clean up the data in my HttpResponse?

There are some very simple web.config settings that can be applied to reduce the amount on unnecessary data returned in an HttpReponse and to minimise ways that hackers can hijack system information.

Here is a quick snippet of web.config settings that may be useful.

<Config>
<system.web>
 <httpRuntime enableVersionHeader="false" />
</system.web>
<system.webServer>
<httpProtocol>
 <customHeaders>
<add name="Strict-Transport-Security" value="778000; includeSubdomains" />
<add name="X-Content-Type-Options" value="nosniff" />
<add name="X-Permitted-Cross-Domain-Policies" value="none" />
<add name="X-XSS-Protection" value="1; mode=block" />
<add name="Cache-Control" value="no-store" />
<add name="Pragma" value="no-cache" />
<remove name="X-Powered-By" />
 </customHeaders>
</httpProtocol>
</system.webServer>
</Config>