Loading Spinner | Aforza Component Library

<h3 class="acl-typography--subtitle1">Spinner</h3> <svg class="acl-loader__circular" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"> </circle> </svg> <h3 class="acl-typography--subtitle1">Spinner With Background</h3> <svg class="acl-loader__circular" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="acl-loader__circular-background" fill="none" stroke-width="6" cx="33" cy="33" r="30"> </circle> <circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle> </svg> <h3 class="acl-typography--subtitle1">Resized Spinner</h3> <svg class="acl-loader__circular" width="28px" height="28px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="acl-loader__circular-path" fill="none" stroke-width="9" cx="33" cy="33" r="26"> </circle> </svg> <h3 class="acl-typography--subtitle1">Spinner With Custom Colour</h3> <svg class="acl-loader__circular" width="28px" height="28px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="acl-loader__circular-background" fill="none" stroke="#A395DE" stroke-width="9" cx="33" cy="33" r="26"> </circle> <circle class="acl-loader__circular-path" fill="none" stroke="#2200b7" stroke-width="9" cx="33" cy="33" r="26"> </circle> </svg>

.acl-loader { &__circular { -webkit-animation: rotator 1.4s linear infinite; animation: rotator 1.4s linear infinite; } &__circular-path { stroke-dasharray: 187; stroke-dashoffset: 0; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite; animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite; &:not([stroke]) { stroke: #46ccc2; } } &__circular-background { &:not([stroke]) { stroke: #e4f8f6; } } @-webkit-keyframes rotator { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @keyframes rotator { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } }

No notes defined.