Loading ...

How can i change the color of the orange loader symbol? | Communifire Support

Home » Spaces » Communifire Support » forum » Communifire API & Developers » How can i change the color of the orange loader symbol?
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Communifire API & Developers

How can i change the color of the orange loader symbol?

Subscribe to RSS
  • Giuseppe

    Hi there,

    Am looking to change the color of the orange loading symbol of Communifire.

    I have only basic understanding of CSS and i tried the below overrides without luck:

    .ax-svg-loader-layer1 {fill: #3261D0 ;}

    .ax-svg-loader-layer2 {fill: #3261D0 ;}

    .ax-svg-loader-layer3 {fill: #3261D0 ;}

    .ax-svg-loader-layer4 {fill: #3261D0 ;}

    .ax-svg-loader-layer5 {fill: #3261D0 ;}

    .ax-svg-loader-layer6 {fill: #3261D0 ;}

    .ax-svg-loader-layer7 {fill: #3261D0 ;}

    Could someone help me achieving this?

  • nvstiers
    Answered

    Hi Giuseppe,

    You will also need to change the fill for the key frames as well which create the animation.

    Here is the updated css with your fill color.

    @keyframes ax-svg-loader-layer7 {
    0%,10% {
    fill: #3261D0;
    opacity: .0
    }

    15%,30% {
    fill: #3261D0;
    opacity: 1.0
    }

    60%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

    @keyframes ax-svg-loader-layer6 {
    0%,15% {
    fill: #3261D0;
    opacity: .0
    }

    20%,40% {
    fill: #3261D0;
    opacity: 1.0
    }

    65%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

    @keyframes ax-svg-loader-layer5 {
    0%,20% {
    fill: #3261D0;
    opacity: .0
    }

    30%,50% {
    fill: #3261D0;
    opacity: 1.0
    }

    70%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

    @keyframes ax-svg-loader-layer4 {
    0%,25% {
    fill: #3261D0;
    opacity: .0
    }

    40%,60% {
    fill: #3261D0;
    opacity: 1.0
    }

    75%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

    @keyframes ax-svg-loader-layer3 {
    0%,30% {
    fill: #3261D0;
    opacity: .0
    }

    50%,70% {
    fill: #3261D0;
    opacity: 1.0
    }

    80%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

    @keyframes ax-svg-loader-layer2 {
    0%,35% {
    fill: #3261D0;
    opacity: .0
    }

    60%,80% {
    fill: #3261D0;
    opacity: 1.0
    }

    85%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

    @keyframes ax-svg-loader-layer1 {
    0%,40% {
    fill: #000bff;
    opacity: .0;
    }

    70%,90% {
    fill: #3261D0;
    opacity: 1.0
    }

    90%,100% {
    fill: #3261D0;
    opacity: .0
    }
    }

  • Giuseppe

    Hi Nathaniel,

    Thanks a lot for your help. It works now but the square frame is still orange.

    What css can i use to fix that?

    Thanks a lot again!

  • nvstiers
    Answered

    Hi Giuseppe,

    You would need to change the color for the border as well

    #ax-svg-loader {
    border: 1px solid #3261D0;
    }
  • Giuseppe

    Amazing Nathaniel thanks a lot for your help.

Page 1 of 1 (5 items)