-1

I have a loader (it is shown when there is a long running ajax request)

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
    /*url('FhHRx.gif')*/
    url('logotip1.png')
    50% 50%
    no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
<div class="modal"><!-- Place at bottom of page --></div>

How do I make url('logotip1.png') rotate using css?

I don't want to create GIF or something.

And how do I add text right to the middle of this modal screen?

mart_ed
  • 11
  • 1

1 Answers1

1

you most likely want to look into CSS animations. There are different types of properties you can use to control the direction, rotation or the ability to transform your image.

Here is another similar post using text. CSS endless rotation animation

The basic concept is to use keyframes to control your elements.

A simple example would be to create a keyframe called rotate and then add it to your modal div

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.modal {
width: 50px;
height: 50px;
background-image: url("https://icon-library.com/images/loading-icon-transparent-background/loading-icon-transparent-background-14.jpg");
background-size: 50px;
animation: rotate 2s linear infinite;
}
<div class="modal">
</div>
david
  • 23
  • 3