spinner reloader image seems behind the overlay

Question

I have wrote a code stuff to show a spinner reloader image with overlay. The code is working fine but the problem is that the image seems behind the overlay and is not in the real color also the Loading... text is not coming with the reload image.

My code is as given below

Can anyone please tell me some solution for this

Working Demo

html

<div ng-app='myApp' ng-controller="Controller">
    <div id="darkLayer" class="loader ng-hide" ng-show="loader">Loading...</div>
    <button ng-click="show()">Show Progress</button>
</div>

script

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
    $scope.loader = false;
    $scope.show = function () {
        $scope.loader = true;
    };
});

css

.loader {
    background-color: #FAFAFA;
    filter: alpha(opacity=50);
    /* IE */
    opacity: 0.5;
    /* Safari, Opera */
    -moz-opacity: 0.50;
    /* FireFox */
    z-index: 1000;
    height: 100%;
    width: 110%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(https://i.stack.imgur.com/K8MeK.gif);
    position: absolute;
    top: 0px;
    left: -13px;
}

The whole #darkLayer element is at `opacity: 0.5`, including the loader. Try setting the `background-color` to `rgba(225,225,225,0.5)` and removing the `opacity`. — BillyNate, Jul 28 '15 at 09:07
@AlexMan You know how we work here, we don't do work for you. Try and center the text and if you have a specific issue with it you can open a new question. Right now you didn't even try. — Moti Azu, Jul 28 '15 at 11:09

score 1 · Accepted Answer · answered Jul 28 '15 at 09:09

1

The loading text is there (top left corner), you just didn't position it to center.

The image is not behind the overlay, but it's opacity is set to 50%, thus the change in color. For example, here it is without the overlay, the gif is still transparent.

If you want the gif to show with full opacity (and the text also) but keep a transparent overlay, you can use RGBA background-color, like so (live demo):

 background-color: rgba(250, 250, 250, 0.5);

answered Jul 28 '15 at 09:09

Moti Azu

5,392
1
23
32

thanks for the reply....why the Loading text is not comming along with the spinner, Loading text is currently showing at to left corner – Alex Man Jul 28 '15 at 09:10
Because the text doesn't automatically center itself, and you didn't write any css to make it center. Just add some css to center the text in the div. – Moti Azu Jul 28 '15 at 09:12

score 1 · Answer 2 · answered Jul 28 '15 at 09:09

1

I've modified the fiddle you've posted. Please take a look. You have to have an alpha channel in your background color instead of opacity on the entire loader.

The reason why your loader text is not in the right position is that you haven't positioned it to be in the specific position you want! I've fixed this in the below fiddle. Please see how it's done and try to adopt it to your requirement.

Working demo

answered Jul 28 '15 at 09:09

Imesh Chandrasiri

5,558
15
60
103

thanks for the reply....Loading text is coming fine but it is not seems responsive when you zoom in and out you can see the text going to some other direction – Alex Man Jul 28 '15 at 10:03

spinner reloader image seems behind the overlay

2 Answers2