How to make a spinnable circle in css using ion-slides

Question

I'm trying to create a circle which would spin in the direction its dragged. There are supposed to be elements on the border of the circle so the elements should spin. For example, these are the elements:

 <ion-slides [options]="slideOpts"> <ion-slide> <div style="background: black; height: 100px; width: 100px"></div> </ion-slide> <ion-slide> <div style="background: red; height: 100px; width: 100px"></div> </ion-slide> <ion-slide> <div style="background: yellow; height: 100px; width: 100px"></div> </ion-slide> </ion-slides>

Here is an image that I hope can make things clearer.

Answer 1

According to Ionicframework Api slides spinnable event isn't available. You can do using CSS3 custom animation . You have to learn more about CSS Animation . Below is an example code.

<div class="proloader">
    <div class="loader">
    </div>
</div>

*,
*:after,
*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
}
.proloader{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
    background: #fff;
}
.proloader {
     align-items: center;
     display: flex;
     flex-direction: row;
     justify-content: center;
}
 .proloader .loader {
     animation: load5 1.1s infinite ease;
     border-radius: 50%;
     font-size: 25px;
     height: 10px;
     position: relative;
     text-indent: -9999em;
     transform: translateZ(0);
     width: 10px;
}
 @keyframes load5 {
     0%, 100% {
         box-shadow: 0 -65px 0 0 #000, 25px -58px 0 0 #200, 45px -45px 0 0 #720000, 58px -24px 0 0 #a30000, 63px 0 0 0 #c00, 57px 24px 0 0 #f00, 44px 44px 0 0 #f33, 25px 57px 0 0 #ff5c5c, 0 63px 0 0 #ff7d7d, -24px 58px 0 0 #ff9797, -45px 45px 0 0 #ffacac, -58px 24px 0 0 #ffbdbd, -65px 0 0 0 #ffcaca, -58px -24px 0 0 #ffd5d5, -45px -45px 0 0 #fdd, -25px -58px 0 0 white;
    }
     6.25% {
         box-shadow: 0 -65px 0 0 white, 25px -58px 0 0 #000, 45px -45px 0 0 #200, 58px -24px 0 0 #720000, 63px 0 0 0 #a30000, 57px 24px 0 0 #c00, 44px 44px 0 0 #f00, 25px 57px 0 0 #f33, 0 63px 0 0 #ff5c5c, -24px 58px 0 0 #ff7d7d, -45px 45px 0 0 #ff9797, -58px 24px 0 0 #ffacac, -65px 0 0 0 #ffbdbd, -58px -24px 0 0 #ffcaca, -45px -45px 0 0 #ffd5d5, -25px -58px 0 0 #fdd;
    }
     12.5% {
         box-shadow: 0 -65px 0 0 #fdd, 25px -58px 0 0 white, 45px -45px 0 0 #000, 58px -24px 0 0 #200, 63px 0 0 0 #720000, 57px 24px 0 0 #a30000, 44px 44px 0 0 #c00, 25px 57px 0 0 #f00, 0 63px 0 0 #f33, -24px 58px 0 0 #ff5c5c, -45px 45px 0 0 #ff7d7d, -58px 24px 0 0 #ff9797, -65px 0 0 0 #ffacac, -58px -24px 0 0 #ffbdbd, -45px -45px 0 0 #ffcaca, -25px -58px 0 0 #ffd5d5;
    }
     18.75% {
         box-shadow: 0 -65px 0 0 #ffd5d5, 25px -58px 0 0 #fdd, 45px -45px 0 0 white, 58px -24px 0 0 #000, 63px 0 0 0 #200, 57px 24px 0 0 #720000, 44px 44px 0 0 #a30000, 25px 57px 0 0 #c00, 0 63px 0 0 #f00, -24px 58px 0 0 #f33, -45px 45px 0 0 #ff5c5c, -58px 24px 0 0 #ff7d7d, -65px 0 0 0 #ff9797, -58px -24px 0 0 #ffacac, -45px -45px 0 0 #ffbdbd, -25px -58px 0 0 #ffcaca;
    }
     25% {
         box-shadow: 0 -65px 0 0 #ffcaca, 25px -58px 0 0 #ffd5d5, 45px -45px 0 0 #fdd, 58px -24px 0 0 white, 63px 0 0 0 #000, 57px 24px 0 0 #200, 44px 44px 0 0 #720000, 25px 57px 0 0 #a30000, 0 63px 0 0 #c00, -24px 58px 0 0 #f00, -45px 45px 0 0 #f33, -58px 24px 0 0 #ff5c5c, -65px 0 0 0 #ff7d7d, -58px -24px 0 0 #ff9797, -45px -45px 0 0 #ffacac, -25px -58px 0 0 #ffbdbd;
    }
     31.25% {
         box-shadow: 0 -65px 0 0 #ffbdbd, 25px -58px 0 0 #ffcaca, 45px -45px 0 0 #ffd5d5, 58px -24px 0 0 #fdd, 63px 0 0 0 white, 57px 24px 0 0 #000, 44px 44px 0 0 #200, 25px 57px 0 0 #720000, 0 63px 0 0 #a30000, -24px 58px 0 0 #c00, -45px 45px 0 0 #f00, -58px 24px 0 0 #f33, -65px 0 0 0 #ff5c5c, -58px -24px 0 0 #ff7d7d, -45px -45px 0 0 #ff9797, -25px -58px 0 0 #ffacac;
    }
     37.5% {
         box-shadow: 0 -65px 0 0 #ffacac, 25px -58px 0 0 #ffbdbd, 45px -45px 0 0 #ffcaca, 58px -24px 0 0 #ffd5d5, 63px 0 0 0 #fdd, 57px 24px 0 0 white, 44px 44px 0 0 #000, 25px 57px 0 0 #200, 0 63px 0 0 #720000, -24px 58px 0 0 #a30000, -45px 45px 0 0 #c00, -58px 24px 0 0 #f00, -65px 0 0 0 #f33, -58px -24px 0 0 #ff5c5c, -45px -45px 0 0 #ff7d7d, -25px -58px 0 0 #ff9797;
    }
     43.75% {
         box-shadow: 0 -65px 0 0 #ff9797, 25px -58px 0 0 #ffacac, 45px -45px 0 0 #ffbdbd, 58px -24px 0 0 #ffcaca, 63px 0 0 0 #ffd5d5, 57px 24px 0 0 #fdd, 44px 44px 0 0 white, 25px 57px 0 0 #000, 0 63px 0 0 #200, -24px 58px 0 0 #720000, -45px 45px 0 0 #a30000, -58px 24px 0 0 #c00, -65px 0 0 0 #f00, -58px -24px 0 0 #f33, -45px -45px 0 0 #ff5c5c, -25px -58px 0 0 #ff7d7d;
    }
     50% {
         box-shadow: 0 -65px 0 0 #ff7d7d, 25px -58px 0 0 #ff9797, 45px -45px 0 0 #ffacac, 58px -24px 0 0 #ffbdbd, 63px 0 0 0 #ffcaca, 57px 24px 0 0 #ffd5d5, 44px 44px 0 0 #fdd, 25px 57px 0 0 white, 0 63px 0 0 #000, -24px 58px 0 0 #200, -45px 45px 0 0 #720000, -58px 24px 0 0 #a30000, -65px 0 0 0 #c00, -58px -24px 0 0 #f00, -45px -45px 0 0 #f33, -25px -58px 0 0 #ff5c5c;
    }
     56.25% {
         box-shadow: 0 -65px 0 0 #ff5c5c, 25px -58px 0 0 #ff7d7d, 45px -45px 0 0 #ff9797, 58px -24px 0 0 #ffacac, 63px 0 0 0 #ffbdbd, 57px 24px 0 0 #ffcaca, 44px 44px 0 0 #ffd5d5, 25px 57px 0 0 #fdd, 0 63px 0 0 white, -24px 58px 0 0 #000, -45px 45px 0 0 #200, -58px 24px 0 0 #720000, -65px 0 0 0 #a30000, -58px -24px 0 0 #c00, -45px -45px 0 0 #f00, -25px -58px 0 0 #f33;
    }
     62.5% {
         box-shadow: 0 -65px 0 0 #f33, 25px -58px 0 0 #ff5c5c, 45px -45px 0 0 #ff7d7d, 58px -24px 0 0 #ff9797, 63px 0 0 0 #ffacac, 57px 24px 0 0 #ffbdbd, 44px 44px 0 0 #ffcaca, 25px 57px 0 0 #ffd5d5, 0 63px 0 0 #fdd, -24px 58px 0 0 white, -45px 45px 0 0 #000, -58px 24px 0 0 #200, -65px 0 0 0 #720000, -58px -24px 0 0 #a30000, -45px -45px 0 0 #c00, -25px -58px 0 0 #f00;
    }
     68.75% {
         box-shadow: 0 -65px 0 0 #f00, 25px -58px 0 0 #f33, 45px -45px 0 0 #ff5c5c, 58px -24px 0 0 #ff7d7d, 63px 0 0 0 #ff9797, 57px 24px 0 0 #ffacac, 44px 44px 0 0 #ffbdbd, 25px 57px 0 0 #ffcaca, 0 63px 0 0 #ffd5d5, -24px 58px 0 0 #fdd, -45px 45px 0 0 white, -58px 24px 0 0 #000, -65px 0 0 0 #200, -58px -24px 0 0 #720000, -45px -45px 0 0 #a30000, -25px -58px 0 0 #c00;
    }
     75% {
         box-shadow: 0 -65px 0 0 #c00, 25px -58px 0 0 #f00, 45px -45px 0 0 #f33, 58px -24px 0 0 #ff5c5c, 63px 0 0 0 #ff7d7d, 57px 24px 0 0 #ff9797, 44px 44px 0 0 #ffacac, 25px 57px 0 0 #ffbdbd, 0 63px 0 0 #ffcaca, -24px 58px 0 0 #ffd5d5, -45px 45px 0 0 #fdd, -58px 24px 0 0 white, -65px 0 0 0 #000, -58px -24px 0 0 #200, -45px -45px 0 0 #720000, -25px -58px 0 0 #a30000;
    }
     81.25% {
         box-shadow: 0 -65px 0 0 #a30000, 25px -58px 0 0 #c00, 45px -45px 0 0 #f00, 58px -24px 0 0 #f33, 63px 0 0 0 #ff5c5c, 57px 24px 0 0 #ff7d7d, 44px 44px 0 0 #ff9797, 25px 57px 0 0 #ffacac, 0 63px 0 0 #ffbdbd, -24px 58px 0 0 #ffcaca, -45px 45px 0 0 #ffd5d5, -58px 24px 0 0 #fdd, -65px 0 0 0 white, -58px -24px 0 0 #000, -45px -45px 0 0 #200, -25px -58px 0 0 #720000;
    }
     87.5% {
         box-shadow: 0 -65px 0 0 #720000, 25px -58px 0 0 #a30000, 45px -45px 0 0 #c00, 58px -24px 0 0 #f00, 63px 0 0 0 #f33, 57px 24px 0 0 #ff5c5c, 44px 44px 0 0 #ff7d7d, 25px 57px 0 0 #ff9797, 0 63px 0 0 #ffacac, -24px 58px 0 0 #ffbdbd, -45px 45px 0 0 #ffcaca, -58px 24px 0 0 #ffd5d5, -65px 0 0 0 #fdd, -58px -24px 0 0 white, -45px -45px 0 0 #000, -25px -58px 0 0 #200;
    }
     93.75% {
         box-shadow: 0 -65px 0 0 #200, 25px -58px 0 0 #720000, 45px -45px 0 0 #a30000, 58px -24px 0 0 #c00, 63px 0 0 0 #f00, 57px 24px 0 0 #f33, 44px 44px 0 0 #ff5c5c, 25px 57px 0 0 #ff7d7d, 0 63px 0 0 #ff9797, -24px 58px 0 0 #ffacac, -45px 45px 0 0 #ffbdbd, -58px 24px 0 0 #ffcaca, -65px 0 0 0 #ffd5d5, -58px -24px 0 0 #fdd, -45px -45px 0 0 white, -25px -58px 0 0 #000;
    }
}

Snippet is below.

 *, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; padding: 0; } .proloader{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9999; background: #fff; } .proloader { align-items: center; display: flex; flex-direction: row; justify-content: center; } .proloader .loader { animation: load5 1.1s infinite ease; border-radius: 50%; font-size: 25px; height: 10px; position: relative; text-indent: -9999em; transform: translateZ(0); width: 10px; } @keyframes load5 { 0%, 100% { box-shadow: 0 -65px 0 0 #000, 25px -58px 0 0 #200, 45px -45px 0 0 #720000, 58px -24px 0 0 #a30000, 63px 0 0 0 #c00, 57px 24px 0 0 #f00, 44px 44px 0 0 #f33, 25px 57px 0 0 #ff5c5c, 0 63px 0 0 #ff7d7d, -24px 58px 0 0 #ff9797, -45px 45px 0 0 #ffacac, -58px 24px 0 0 #ffbdbd, -65px 0 0 0 #ffcaca, -58px -24px 0 0 #ffd5d5, -45px -45px 0 0 #fdd, -25px -58px 0 0 white; } 6.25% { box-shadow: 0 -65px 0 0 white, 25px -58px 0 0 #000, 45px -45px 0 0 #200, 58px -24px 0 0 #720000, 63px 0 0 0 #a30000, 57px 24px 0 0 #c00, 44px 44px 0 0 #f00, 25px 57px 0 0 #f33, 0 63px 0 0 #ff5c5c, -24px 58px 0 0 #ff7d7d, -45px 45px 0 0 #ff9797, -58px 24px 0 0 #ffacac, -65px 0 0 0 #ffbdbd, -58px -24px 0 0 #ffcaca, -45px -45px 0 0 #ffd5d5, -25px -58px 0 0 #fdd; } 12.5% { box-shadow: 0 -65px 0 0 #fdd, 25px -58px 0 0 white, 45px -45px 0 0 #000, 58px -24px 0 0 #200, 63px 0 0 0 #720000, 57px 24px 0 0 #a30000, 44px 44px 0 0 #c00, 25px 57px 0 0 #f00, 0 63px 0 0 #f33, -24px 58px 0 0 #ff5c5c, -45px 45px 0 0 #ff7d7d, -58px 24px 0 0 #ff9797, -65px 0 0 0 #ffacac, -58px -24px 0 0 #ffbdbd, -45px -45px 0 0 #ffcaca, -25px -58px 0 0 #ffd5d5; } 18.75% { box-shadow: 0 -65px 0 0 #ffd5d5, 25px -58px 0 0 #fdd, 45px -45px 0 0 white, 58px -24px 0 0 #000, 63px 0 0 0 #200, 57px 24px 0 0 #720000, 44px 44px 0 0 #a30000, 25px 57px 0 0 #c00, 0 63px 0 0 #f00, -24px 58px 0 0 #f33, -45px 45px 0 0 #ff5c5c, -58px 24px 0 0 #ff7d7d, -65px 0 0 0 #ff9797, -58px -24px 0 0 #ffacac, -45px -45px 0 0 #ffbdbd, -25px -58px 0 0 #ffcaca; } 25% { box-shadow: 0 -65px 0 0 #ffcaca, 25px -58px 0 0 #ffd5d5, 45px -45px 0 0 #fdd, 58px -24px 0 0 white, 63px 0 0 0 #000, 57px 24px 0 0 #200, 44px 44px 0 0 #720000, 25px 57px 0 0 #a30000, 0 63px 0 0 #c00, -24px 58px 0 0 #f00, -45px 45px 0 0 #f33, -58px 24px 0 0 #ff5c5c, -65px 0 0 0 #ff7d7d, -58px -24px 0 0 #ff9797, -45px -45px 0 0 #ffacac, -25px -58px 0 0 #ffbdbd; } 31.25% { box-shadow: 0 -65px 0 0 #ffbdbd, 25px -58px 0 0 #ffcaca, 45px -45px 0 0 #ffd5d5, 58px -24px 0 0 #fdd, 63px 0 0 0 white, 57px 24px 0 0 #000, 44px 44px 0 0 #200, 25px 57px 0 0 #720000, 0 63px 0 0 #a30000, -24px 58px 0 0 #c00, -45px 45px 0 0 #f00, -58px 24px 0 0 #f33, -65px 0 0 0 #ff5c5c, -58px -24px 0 0 #ff7d7d, -45px -45px 0 0 #ff9797, -25px -58px 0 0 #ffacac; } 37.5% { box-shadow: 0 -65px 0 0 #ffacac, 25px -58px 0 0 #ffbdbd, 45px -45px 0 0 #ffcaca, 58px -24px 0 0 #ffd5d5, 63px 0 0 0 #fdd, 57px 24px 0 0 white, 44px 44px 0 0 #000, 25px 57px 0 0 #200, 0 63px 0 0 #720000, -24px 58px 0 0 #a30000, -45px 45px 0 0 #c00, -58px 24px 0 0 #f00, -65px 0 0 0 #f33, -58px -24px 0 0 #ff5c5c, -45px -45px 0 0 #ff7d7d, -25px -58px 0 0 #ff9797; } 43.75% { box-shadow: 0 -65px 0 0 #ff9797, 25px -58px 0 0 #ffacac, 45px -45px 0 0 #ffbdbd, 58px -24px 0 0 #ffcaca, 63px 0 0 0 #ffd5d5, 57px 24px 0 0 #fdd, 44px 44px 0 0 white, 25px 57px 0 0 #000, 0 63px 0 0 #200, -24px 58px 0 0 #720000, -45px 45px 0 0 #a30000, -58px 24px 0 0 #c00, -65px 0 0 0 #f00, -58px -24px 0 0 #f33, -45px -45px 0 0 #ff5c5c, -25px -58px 0 0 #ff7d7d; } 50% { box-shadow: 0 -65px 0 0 #ff7d7d, 25px -58px 0 0 #ff9797, 45px -45px 0 0 #ffacac, 58px -24px 0 0 #ffbdbd, 63px 0 0 0 #ffcaca, 57px 24px 0 0 #ffd5d5, 44px 44px 0 0 #fdd, 25px 57px 0 0 white, 0 63px 0 0 #000, -24px 58px 0 0 #200, -45px 45px 0 0 #720000, -58px 24px 0 0 #a30000, -65px 0 0 0 #c00, -58px -24px 0 0 #f00, -45px -45px 0 0 #f33, -25px -58px 0 0 #ff5c5c; } 56.25% { box-shadow: 0 -65px 0 0 #ff5c5c, 25px -58px 0 0 #ff7d7d, 45px -45px 0 0 #ff9797, 58px -24px 0 0 #ffacac, 63px 0 0 0 #ffbdbd, 57px 24px 0 0 #ffcaca, 44px 44px 0 0 #ffd5d5, 25px 57px 0 0 #fdd, 0 63px 0 0 white, -24px 58px 0 0 #000, -45px 45px 0 0 #200, -58px 24px 0 0 #720000, -65px 0 0 0 #a30000, -58px -24px 0 0 #c00, -45px -45px 0 0 #f00, -25px -58px 0 0 #f33; } 62.5% { box-shadow: 0 -65px 0 0 #f33, 25px -58px 0 0 #ff5c5c, 45px -45px 0 0 #ff7d7d, 58px -24px 0 0 #ff9797, 63px 0 0 0 #ffacac, 57px 24px 0 0 #ffbdbd, 44px 44px 0 0 #ffcaca, 25px 57px 0 0 #ffd5d5, 0 63px 0 0 #fdd, -24px 58px 0 0 white, -45px 45px 0 0 #000, -58px 24px 0 0 #200, -65px 0 0 0 #720000, -58px -24px 0 0 #a30000, -45px -45px 0 0 #c00, -25px -58px 0 0 #f00; } 68.75% { box-shadow: 0 -65px 0 0 #f00, 25px -58px 0 0 #f33, 45px -45px 0 0 #ff5c5c, 58px -24px 0 0 #ff7d7d, 63px 0 0 0 #ff9797, 57px 24px 0 0 #ffacac, 44px 44px 0 0 #ffbdbd, 25px 57px 0 0 #ffcaca, 0 63px 0 0 #ffd5d5, -24px 58px 0 0 #fdd, -45px 45px 0 0 white, -58px 24px 0 0 #000, -65px 0 0 0 #200, -58px -24px 0 0 #720000, -45px -45px 0 0 #a30000, -25px -58px 0 0 #c00; } 75% { box-shadow: 0 -65px 0 0 #c00, 25px -58px 0 0 #f00, 45px -45px 0 0 #f33, 58px -24px 0 0 #ff5c5c, 63px 0 0 0 #ff7d7d, 57px 24px 0 0 #ff9797, 44px 44px 0 0 #ffacac, 25px 57px 0 0 #ffbdbd, 0 63px 0 0 #ffcaca, -24px 58px 0 0 #ffd5d5, -45px 45px 0 0 #fdd, -58px 24px 0 0 white, -65px 0 0 0 #000, -58px -24px 0 0 #200, -45px -45px 0 0 #720000, -25px -58px 0 0 #a30000; } 81.25% { box-shadow: 0 -65px 0 0 #a30000, 25px -58px 0 0 #c00, 45px -45px 0 0 #f00, 58px -24px 0 0 #f33, 63px 0 0 0 #ff5c5c, 57px 24px 0 0 #ff7d7d, 44px 44px 0 0 #ff9797, 25px 57px 0 0 #ffacac, 0 63px 0 0 #ffbdbd, -24px 58px 0 0 #ffcaca, -45px 45px 0 0 #ffd5d5, -58px 24px 0 0 #fdd, -65px 0 0 0 white, -58px -24px 0 0 #000, -45px -45px 0 0 #200, -25px -58px 0 0 #720000; } 87.5% { box-shadow: 0 -65px 0 0 #720000, 25px -58px 0 0 #a30000, 45px -45px 0 0 #c00, 58px -24px 0 0 #f00, 63px 0 0 0 #f33, 57px 24px 0 0 #ff5c5c, 44px 44px 0 0 #ff7d7d, 25px 57px 0 0 #ff9797, 0 63px 0 0 #ffacac, -24px 58px 0 0 #ffbdbd, -45px 45px 0 0 #ffcaca, -58px 24px 0 0 #ffd5d5, -65px 0 0 0 #fdd, -58px -24px 0 0 white, -45px -45px 0 0 #000, -25px -58px 0 0 #200; } 93.75% { box-shadow: 0 -65px 0 0 #200, 25px -58px 0 0 #720000, 45px -45px 0 0 #a30000, 58px -24px 0 0 #c00, 63px 0 0 0 #f00, 57px 24px 0 0 #f33, 44px 44px 0 0 #ff5c5c, 25px 57px 0 0 #ff7d7d, 0 63px 0 0 #ff9797, -24px 58px 0 0 #ffacac, -45px 45px 0 0 #ffbdbd, -58px 24px 0 0 #ffcaca, -65px 0 0 0 #ffd5d5, -58px -24px 0 0 #fdd, -45px -45px 0 0 white, -25px -58px 0 0 #000; } }

 <div class="proloader"> <div class="loader"> </div> </div>

Go to CSS Animation Library Or Animista .