%3C/svg>');transition:all 0.2s ease;} .disabled input{ opacity:0.5;} .spinner{ width:18px;height:18px;margin:0 auto;border-radius:50%;background:#FFF;background:linear-gradient(to right, #FFF 10%, rgba(255, 255, 255, 0) 60%);position:relative;animation:load 0.8s infinite linear;transform:translateZ(0);}.spinner:before{ width:50%;height:50%;background:#FFF;border-radius:100% 0 0 0;position:absolute;top:0;left:0;content:"";}.spinner:after{ background:#0AF;width:14px;height:14px;border-radius:50%;content:"";margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;}@keyframes load{ 0%{ transform:rotate(0deg);}100%{ transform:rotate(360deg);}} .no-connection .button{ max-width:100px;}.no-connection p{ max-width:240px;margin-bottom:10px;} .tutorial .right-half{ padding:0;}.tutorial .button{ max-width:140px;margin-bottom:10px;}.tutorial p{ max-width:260px;line-height:1.5;margin-bottom:10px;}.tutorial .skip{ color:rgba(0, 0, 0, 0.4);}.tutorial .skip:active{ color:rgba(0, 0, 0, 0.6);}.tutorial video{ width:404.5px;-webkit-user-drag:none;}.hide{ display:none;}
Discover the power of design + code. In this tutorial, you’ll learn how to create a multi-screen app flow. Set up frames in Design, then bring them to life in Code.