// Spinners // -------------------------------------------------- ion-spinner { display: inline-block; position: relative; width: 28px; height: 28px; } ion-spinner svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(0); } ion-spinner.spinner-paused svg { animation-play-state: paused; } // Spinner: ios / ios-small // -------------------------------------------------- .spinner-ios line, .spinner-ios-small line { stroke: #69717d;; stroke-width: 4px; stroke-linecap: round; } .spinner-ios svg, .spinner-ios-small svg { animation: spinner-fade-out 1s linear infinite; } // Spinner: bubbles // -------------------------------------------------- .spinner-bubbles circle { fill: black; } .spinner-bubbles svg { animation: spinner-scale-out 1s linear infinite; } // Spinner: circles // -------------------------------------------------- .spinner-circles circle { fill: #69717d; } .spinner-circles svg { animation: spinner-fade-out 1s linear infinite; } // Spinner: crescent // -------------------------------------------------- .spinner-crescent circle { fill: transparent; stroke: black; stroke-width: 4px; stroke-dasharray: 128px; stroke-dashoffset: 82px; } .spinner-crescent svg { animation: spinner-rotate 1s linear infinite; } // Spinner: dots // -------------------------------------------------- .spinner-dots circle { fill: #444; stroke-width: 0; } .spinner-dots svg { animation: spinner-dots 1s linear infinite; transform-origin: center; } // Animation Keyframes // -------------------------------------------------- @keyframes spinner-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes spinner-scale-out { 0% { transform: scale(1, 1); } 100% { transform: scale(0, 0); } } @keyframes spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinner-dots { 0% { opacity: 0.9; transform: scale(1, 1); } 50% { opacity: 0.3; transform: scale(0.4, 0.4); } 100% { opacity: 0.9; transform: scale(1, 1); } }