CINXE.COM

<!doctype html> <html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"> <head > <meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><meta data-n-head="1" name="theme-color" content="#323A56"><meta data-n-head="1" name="tax1" content="inv_simulator"><meta data-n-head="1" name="tax2" content="inv_sim-" data-hid="tax2"><meta data-n-head="1" name="tax3" content="inv_sim-" data-hid="tax3"><title>Simulator - Investopedia Stock Simulator</title><link data-n-head="1" rel="icon" type="image/x-icon" href="https://www.investopedia.com/favicon.ico"><link data-n-head="1" rel="canonical" href="https://www.investopedia.com/simulator/"><script data-n-head="1" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" async></script><script data-n-head="1" src="https://cdn.p-n.io/pushly-sdk.min.js?domain_key=vpyGZqyitQiHrR9lezhxmEYqRqsavIpXvOBd" type="application/javascript"></script><script data-n-head="1" data-hid="gtm-script">if(!window._gtm_init){window._gtm_init=1;(function(w,n,d,m,e,p){w[d]=(w[d]==1||n[d]=='yes'||n[d]==1||n[m]==1||(w[e]&&w[e][p]&&w[e][p]()))?1:0})(window,navigator,'doNotTrack','msDoNotTrack','external','msTrackingProtectionEnabled');(function(w,d,s,l,x,y){w[x]={};w._gtm_inject=function(i){if(w.doNotTrack||w[x][i])return;w[x][i]=1;w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i;f.parentNode.insertBefore(j,f);};w[y]('GTM-NKFNNKZ')})(window,document,'script','dataLayer','_gtm_ids','_gtm_inject')}</script><base href="/simulator/"><link rel="preload" href="https://i-n.investopedia.com/dedd2c3.js" as="script"><link rel="preload" href="https://i-n.investopedia.com/55a273a.js" as="script"><link rel="preload" href="https://i-n.investopedia.com/8171402.js" as="script"><link rel="preload" href="https://i-n.investopedia.com/2d76eb9.js" as="script"> </head> <body > <noscript data-n-head="1" data-hid="gtm-noscript" data-pbody="true"><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKFNNKZ&" height="0" width="0" style="display:none;visibility:hidden" title="gtm"></iframe></noscript><div id="__nuxt"><script> const appTheme = localStorage.getItem("appTheme"); const loaderContainer = document.querySelector('body'); if (appTheme === 'stock' || appTheme === null) { loaderContainer.classList.add("sim-loading-page--stock"); } else { loaderContainer.classList.add("sim-loading-page--crypto"); } </script> <style> /* LOADING STAIRS --------------- stairs animation credit: https://codepen.io/ispal/pen/mVaaJe nuxt docs: https://nuxtjs.org/docs/features/loading/ loading html examples: https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading 1) Containers a. body b. logo c. loader 2) Colours a. stock b. crypto 3) Animation a. bars b. ball */ /* 1a */ body, html { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 0; } /* 1b */ .sim-loading-page__logo { height: 25px; width: auto; } @media only screen and (min-width: 600px) { .sim-loading-page__logo { height: 30px; } } .sim-loading-page--stock .sim-loading-page__logo--crypto-logo { display: none; } .sim-loading-page--crypto .sim-loading-page__logo--stock-logo { display: none; } /* 1c */ .sim-loading-page__loader { position: relative; margin: 0 auto; width: 75px; height: 100px; } /* 2a */ .sim-loading-page--stock { background: #323A56; } .sim-loading-page--stock .loader__bar { background: #fff; } .sim-loading-page--stock .loader__ball { background: #fff; } /* 2b */ .sim-loading-page--crypto { background: #212121; } .sim-loading-page--crypto .loader__bar { background: #E7FB04; } .sim-loading-page--crypto .loader__ball { background: #E7FB04; } /* 3a */ .loader__bar { position: absolute; bottom: 0; width: 10px; height: 50%; transform-origin: center bottom; box-shadow: 1px 1px 0 rgba(0,0,0,.2); } .loader__bar:nth-child(1) { left: 0px; transform: scale(1, 0.2); animation: barUp1 4s infinite; } .loader__bar:nth-child(2) { left: 15px; transform: scale(1, 0.4); animation: barUp2 4s infinite; } .loader__bar:nth-child(3) { left: 30px; transform: scale(1, 0.6); animation: barUp3 4s infinite; } .loader__bar:nth-child(4) { left: 45px; transform: scale(1, 0.8); animation: barUp4 4s infinite; } .loader__bar:nth-child(5) { left: 60px; transform: scale(1, 1); animation: barUp5 4s infinite; } @keyframes barUp1 { 0% { transform: scale(1, .2); } 40%{ transform: scale(1, .2); } 50% { transform: scale(1, 1); } 90% { transform: scale(1,1); } 100% { transform: scale(1,.2); } } @keyframes barUp2 { 0% { transform: scale(1, .4); } 40% { transform: scale(1, .4); } 50% { transform: scale(1, .8); } 90% { transform: scale(1, .8); } 100% { transform: scale(1, .4); } } @keyframes barUp3 { 0% { transform: scale(1, .6); } 100% { transform: scale(1, .6); } } @keyframes barUp4 { 0% { transform: scale(1, .8); } 40% { transform: scale(1, .8); } 50% { transform: scale(1, .4); } 90% { transform: scale(1, .4); } 100% { transform: scale(1, .8); } } @keyframes barUp5 { 0% { transform: scale(1, 1); } 40% { transform: scale(1, 1); } 50% { transform: scale(1, .2); } 90% { transform: scale(1, .2); } 100% { transform: scale(1, 1); } } /* 3b */ .loader__ball { position: absolute; bottom: 10px; left: 0; width: 10px; height: 10px; border-radius: 50%; animation: ball 4s infinite; } @keyframes ball { 0% { transform: translate(0, 0); } 5% { transform: translate(8px, -14px); } 10% { transform: translate(15px, -10px) } 17% { transform: translate(23px, -24px) } 20% { transform: translate(30px, -20px) } 27% { transform: translate(38px, -34px) } 30% { transform: translate(45px, -30px) } 37% { transform: translate(53px, -44px) } 40% { transform: translate(60px, -40px) } 50% { transform: translate(60px, 0) } 57% { transform: translate(53px, -14px) } 60% { transform: translate(45px, -10px) } 67% { transform: translate(37px, -24px) } 70% { transform: translate(30px, -20px) } 77% { transform: translate(22px, -34px) } 80% { transform: translate(15px, -30px) } 87% { transform: translate(7px, -44px) } 90% { transform: translate(0, -40px) } 100% { transform: translate(0, 0); } } </style> <img src="mobile-stocks-logo.svg" alt="Stock Horizontal Logo" class="sim-loading-page__logo sim-loading-page__logo--stock-logo" /> <img src="mobile-crypto-logo.svg" alt="Crypto Horizontal Logo" class="sim-loading-page__logo sim-loading-page__logo--crypto-logo" /> <div class="sim-loading-page__loader"> <div class="loader__bar"></div> <div class="loader__bar"></div> <div class="loader__bar"></div> <div class="loader__bar"></div> <div class="loader__bar"></div> <div class="loader__ball"></div> </div> </div><script>window.__NUXT__=(function(a,b){return {config:{isProd:true,publicPath:"https:\u002F\u002Fi-n.investopedia.com",basePath:a,oneTrustKey:"fc941c9a-c9b3-42fb-8afe-90fb28522868",gtm:{id:"GTM-NKFNNKZ"},gam:{prod:b,qa:"21673257402",id:b,refreshRate:30000},sentry:{config:{environment:"prod"}},pushlyDomainKey:"vpyGZqyitQiHrR9lezhxmEYqRqsavIpXvOBd",_app:{basePath:a,assetsPath:"\u002F",cdnURL:"https:\u002F\u002Fi-n.investopedia.com\u002F"},urls:{dashcash:["https:\u002F\u002Fdashcash-k8s-prod.a-ue1.investopedia.com"],"keycloak-public":["https:\u002F\u002Fkeycloak-public-k8s-prod.a-ue1.dotdash.com"]}}}}("\u002Fsimulator\u002F","3865"))</script> <script src="https://i-n.investopedia.com/dedd2c3.js"></script><script src="https://i-n.investopedia.com/55a273a.js"></script><script src="https://i-n.investopedia.com/8171402.js"></script><script src="https://i-n.investopedia.com/2d76eb9.js"></script></body> </html>