My Technical Notes

Thursday, 20 August 2015

HTML/CSS for green checkboxes, and Angular loading gif logic

CSS

Remember to change the `/Content/images/` paths.


.unchecked, .checked
{
    width: 25px;
    height: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    background: url('/Content/images/check.png') no-repeat;
}

.unchecked
{
    background-position: 0 0;
}

.unchecked:hover
{
    background-position: 0 -25px;
}

.checked {
    background-position: 0 -50px;
}

.loading {  
    width: 25px;
    height: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    background: url('/Content/images/preloader25x25.gif') no-repeat !important;
}

HTML


<div ng-app="app" ng-controller="ctrl">
    <span class="loading"></span>
    <br />
    <a ng-click="toggleResolved()" ng-class="{ loading : loading, checked : resolved, unchecked : !resolved }"></a>
</div>
<h4>Angular</h4>
<p>
Note that we are not setting `loading` at the outset, even so Angular is able to resolve it.
</p>
<script type='syntaxhighlighter' class='brush: js; wrap-lines: false'>
var app = angular.module('app', []);

app.controller('ctrl', function ($scope, $timeout) {
    $scope.resolved = false;

    $scope.toggleResolved = function () {
        $scope.loading = true;
        $timeout(function () {
            $scope.resolved = !$scope.resolved;
            $scope.loading = false;
        }, 2000);
    }
});

Downloads

No comments: